CODEWITHSUNDEEP
csssvgfillstroke
Alex Ivasyuv
Alex Ivasyuv

Reputation: 8844

SVG `fill` overlaps `stroke`

Having a circle it has fill and stroke. But I see that fill color overlaps little bit stroke. When I do stroke to none, I loose circle radius that was before, since its space released.

enter image description here

I expected that fill and stroke behaves the same as background and border in CSS, but it's not. I can't set them the same color with the same opacity, since fill will overlap stroke and I will see another color to be appeared.

enter image description here

Both fill and stroke set to red with the same opacity.

How I can do, so fill stops right where stroke is starting (having fill and stroke the same color and opacity), and I have flat color without any borders?

Upvotes: 0

Views: 2292

Answers (2)

Matthias
Matthias

Reputation: 31

It's simple, actually. You can use:

paint-order: stroke;

that will first paint the stroke on the canvas and then paint the fill.

Upvotes: 0

franklylately
franklylately

Reputation: 1183

You're looking for stroke-alignment though it's a never implemented CSS feature — see https://www.w3.org/TR/svg-strokes/#SpecifyingStrokeAlignment.

For simple geometry, you can achieve this by duplicating the structure and adjusting.

#c1 {
  fill: red;
  fill-opacity: 0.3;
  stroke: none;
}
#c2 {
  stroke: green;
  stroke-opacity: 0.3;
  fill: none;
}
<svg viewBox="0 0 40 40">
  <circle id="c1" cx="20" cy="20" r="11.5" stroke-width="3"></circle>
  <circle id="c2" cx="20" cy="20" r="13" stroke-width="3"></circle>
</svg>

Or by changing the opacity at the element, not the attributes.

svg circle {
  opacity: 0.3;
  fill: red;
  stroke: green;
}
<svg viewBox="0 0 40 40">
  <circle cx="20" cy="20" r="13" stroke-width="3"></circle>
</svg>

Upvotes: 3

Related Questions