提问者:小点点

SVG圆笔画不透明度


是否有可能使圆圈的笔画不透明,而没有内圈?像这样:

到目前为止,我只能这样做:

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>

共1个答案

匿名用户

尝试将画笔顺序:笔划;属性添加到圆的样式声明中。您可能还需要更改圆的笔划宽度和半径。

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