html - div 中的 SVG 描边问题

Question

我需要在 div 中绘制一个 SVG并填满它。如果 SVG 有 stroke设置，它绘制在 div 之外.

我看到了 svg与 width=100%不考虑笔划宽度。

.shape {
  border: 1px solid blue;
  width: 200px;
  height: 200px;
}
svg {
  overflow: hidden;  // IE11 has 'visible' as default
}

<div class="shape">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="20" viewBox="0,0,100,50">
    <polygon points="0,50 100,50 50,0" />
  </svg>
</div>

如何在考虑笔划宽度的情况下使 SVG 填充父级？

应该是这样的:

这必须适用于任何 SVG，三 Angular 形只是一个例子。

以在 Chrome 中打开浏览器开发工具为例，如果我将鼠标悬停在 polygon 上, 它显示了考虑到笔划的边界框。我想知道这是否仅适用于网络浏览器，还是也可以用代码实现。或者，也许这不是正确的方向。

我尝试的另一件事是使用 <img>并将 SVG 加载到其中。相同的结果。

Answer 1

看起来您只需要更改此示例中的多边形点即可!

或者我在这里遗漏了什么？!

.shape {
  border: 1px solid blue;
  width: 200px;
  height: 200px;
}
svg {
  overflow: hidden;  // IE11 has 'visible' as default
}

<div class="shape">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" preserveAspectRatio="none" stroke="red" stroke-width="15" viewBox="0,0,100,50">
    <polygon points="10,50 90,50 50,10" />
  </svg>
</div>