SVG 'stroke-width' 改变对象的尺寸答案

【问题标题】：SVG 'stroke-width' changes dimensions of the objectSVG 'stroke-width' 改变对象的尺寸
【发布时间】：2020-10-01 21:25:01
【问题描述】：

我在玩 SVG 图像。在以下代码中：

<svg height="250px" width="250px">
<circle
  r="120"
  cx="125"
  cy="125"
  fill="#334d5c"
  stroke="#e27a3f"
  stroke-width="1px"
/>
</svg>

当我增加stroke-width 属性时，它开始改变圆的半径，使其变小。

我的问题是：这个过程的比率或变化率是多少？额外的像素如何添加到圆的半径中？有没有办法消除这种影响？

感谢您的宝贵时间。

【问题讨论】：

标签： html css xml svg

【解决方案1】：

半径减少笔划宽度的一半。

如果您希望圆圈填充不减小大小，那么最简单的解决方法是使用两个圆圈。将带笔触的那一个放在带填充的那一个后面。

但请注意，如果使用此方法，一半的笔划宽度将被前面的圆圈隐藏。所以如果你需要一个 10px 的笔触，你实际上需要将 stroke-width 设置为 20px。

<svg height="250px" width="250px">
<circle
  r="120"
  cx="125"
  cy="125"
  fill="#334d5c"
  stroke="#e27a3f"
  stroke-width="10px"
/>
</svg>


<svg height="250px" width="250px">
  <circle r="120" cx="125" cy="125"
          stroke="#e27a3f" stroke-width="10px"/>
  <circle r="120" cx="125" cy="125"
          fill="#334d5c"/>
</svg>

【讨论】：

所以要清楚，半径不会改变，例如如果你设置stroke-opacity: 0.5 你可以看到填充区域没有改变，发生的是笔划在两者中传播方向。

【解决方案2】：

笔划的中间与圆的半径（或更一般地说，路径的位置）重合。一半增加整体大小，一半减小填充的可见大小。

但这只是一个默认设置，因为描边是在填充之后绘制的。您可以使用 CSS 属性 paint-order 更改该顺序。如果将其设置为stroke，则会先绘制笔触，然后再进行填充，这样它就会覆盖笔触的内半部分。

<svg height="250px" width="250px">
<circle style="fill:#334d5c;stroke:#e27a3f;stroke-width:10px;"
  r="120"
  cx="125"
  cy="125"
/>
</svg>

<svg height="250px" width="250px">
<circle style="fill:#334d5c;stroke:#e27a3f;stroke-width:10px;paint-order:stroke;"
  r="120"
  cx="125"
  cy="125"
/>
</svg>

除 IE 和 Edge

【讨论】：