html – div中的SVG笔画问题

2024年1月30日 289次阅读

我需要在div中绘制一个SVG并填充它.如果SVG设置了笔划,则将其绘制在div之外.

我看到宽度= 100％的svg没有考虑笔划宽度.

.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填充父级考虑到笔画宽度？

它应该是这样的：

《html – div中的SVG笔画问题》

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

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

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

最佳答案 看起来你只需要在这个例子中改变你的多边形点！

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

.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>
点赞