div中的SVG笔划问题

Question

我需要在div内绘制一个SVG并填充它。如果SVG设置了stroke，则会在div之外绘制。

我发现svg width=100%并未考虑笔画宽度。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

它应该是这样的：

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

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

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

Answer 1

看起来你只需要在这个例子中更改多边形点！

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;