div内的SVG中风问题答案

【问题标题】：issue with SVG stroke inside divdiv内的SVG中风问题
【发布时间】：2017-03-09 01:32:30
【问题描述】：

我需要在 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，三角形只是一个示例。

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

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

【问题讨论】：

我相信我之前评论过。你还不能。您必须构建 SVG Viewbox 以考虑任何可能的笔划。
相关 - stackoverflow.com/questions/7241393/…
@Paulie_D 但vectorpaint.yaks.co.nz 以某种方式做到了。制作一个三角形，将笔画粗细设置为 20 左右，然后查看悬停选择矩形。
@Paulie_D 我不认为这些问题是相关的，我不打算控制笔画位置。
嗯，他们有点是。视图框定义了 SVG 的画布区域。您的多边形与 SVG 的 exact 边缘紧密匹配，因此任何笔划都将被视图框剪裁并且不可见。

标签： html css svg

【解决方案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>

【讨论】：

您是如何得出这些数字的？这必须适用于任何 SVG