是否有可能使圆圈的笔画不透明,而没有内圈?像这样:
到目前为止,我只能这样做:
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>
尝试将画笔顺序:笔划;
属性添加到圆的样式声明中。您可能还需要更改圆的笔划宽度和半径。
@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>