SVG ` `fill` `与`stroke`重叠
SVG ` `fill` `与`stroke`重叠
提问于 2021-09-22 19:53:26
有一个圆圈，它有fill和stroke。但我发现fill颜色与stroke有一点重叠。当我对none执行stroke操作时，我失去了之前的圆半径，因为它释放了空间。
我原以为fill和stroke的行为与CSS中的background和border相同，但事实并非如此。我不能用相同的不透明度设置它们相同的颜色，因为fill会与stroke重叠，我会看到另一种颜色出现。
fill和stroke都设置为红色，具有相同的不透明度。
我该怎么做，这样fill就停止在stroke开始的地方(让fill和stroke具有相同的颜色和不透明度)，并且我有没有任何边界的平面颜色？
回答 1
Stack Overflow用户
发布于 2021-09-22 20:04:35
你正在寻找stroke-alignment，尽管它是一个从未实现过的CSS特性--参见https://www.w3.org/TR/svg-strokes/#SpecifyingStrokeAlignment。
对于简单的几何体，可以通过复制结构并进行调整来实现这一点。
#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>
或者通过改变元素的不透明度，而不是改变属性。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69290489
复制相关文章
相似问题
腾讯云开发者
