SVG 圆形描边不透明度

Question

是否可以让圆的笔划不透明，而不是内圆？像这样：

到目前为止我只能这样做：

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>

Answer 1

尝试将 paint-order: stroke; 属性添加到圆的样式声明中。您可能还需要更改圆的描边宽度和半径。

@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>

SVG 圆形描边不透明度

SVG circle stroke opacity

svg

fill

stroke