SVG `fill` overlaps `stroke`

81
September 24, 2021, at 01:30 AM

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.

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.

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?

Answer 1

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>

READ ALSO
Get MIN, MAX values from a linking table

Get MIN, MAX values from a linking table

I have 3 tables in a MYSQL DB

74
How to avoid duplicate items in PagingAdapter?

How to avoid duplicate items in PagingAdapter?

I have implemented paging3 for my android projectTo avoid duplicated items, I created a DiffUtil

38
WebRTC Force Stereo in Chrome by editing the sdp config

WebRTC Force Stereo in Chrome by editing the sdp config

I'm trying to implement a workaround for what appears to be a known issue in all browsers but firefox where webRTC audio stream is downgraded to mono from stereo

47