时间戳

首页 > 解决方案 > SVG“填充”与“中风”重叠

css - SVG“填充”与“中风”重叠

问题描述

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

在此处输入图像描述

我期望它fill的行为与CSSstroke中的 and 相同，但事实并非如此。我不能将它们设置为具有相同不透明度的相同颜色，因为它们会重叠，我会看到另一种颜色出现。backgroundborderfillstroke

在此处输入图像描述

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

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

标签： csssvgfillstroke

解决方案

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>

推荐阅读