SVG“填充”与“中风”重叠答案

【问题标题】：SVG `fill` overlaps `stroke`SVG“填充”与“中风”重叠
【发布时间】：2021-11-16 06:58:22
【问题描述】：

有一个圆圈，它有fill 和stroke。但我看到fill 颜色与stroke 有一点重叠。当我从stroke 到none 时，我松开了之前的圆半径，因为它的空间被释放了。

我预计 fill 和 stroke 在 CSS 中的行为与 background 和 border 相同，但事实并非如此。我无法将它们设置为具有相同不透明度的相同颜色，因为fill 将与stroke 重叠，我会看到另一种颜色出现。

fill 和 stroke 都设置为红色，不透明度相同。

我该怎么做，所以fill 停在stroke 开始的地方（fill 和stroke 具有相同的颜色和不透明度），并且我的颜色是纯色没有任何边框？

【问题讨论】：

标签： css svg fill stroke

【解决方案1】：

您正在寻找 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>

【讨论】：