Search code examples
svgfillstroke

SVG circle stroke opacity

Is it possible to make the circle's stroke opacity, and not having that inner circle? Like this:

enter image description here

I can only do like this so far: 

svg {
  width: 200px;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" style="
    stroke-width: 10;
    stroke: purple;
    stroke-opacity: 0.5;
    fill: green;
"></circle>
</svg>

Solution

  • Try adding the paint-order: stroke; property to the circle's style declaration. You may also need to change the stroke width and radius of the circle.

    @namespace svg url("http://www.w3.org/2000/svg");
/* Important so that we don't end up targeting HTML elements */

svg {
  width: 200px;
}

svg|circle.example-circle {
  fill: #008000;
  stroke: #800080;
  stroke-width: 15px;
  stroke-opacity: 0.5;
  paint-order: stroke;
}
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="35" class="example-circle" />
</svg>