SVG 多边形描边的错误答案

【问题标题】：Bugs with SVG polygon strokeSVG 多边形描边的错误
【发布时间】：2016-01-08 22:04:57
【问题描述】：

我创建了带有六边形图像掩码的 SVG，当我尝试为多边形赋予笔触样式时出现了一个错误：笔触超出了多边形。我该怎么做才能创建正确的笔画？

这是我的代码：

<svg class="main-svg" width="284" height="332" viewBox="0 0 142 166" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="142" height="166">
   <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://eisenpar.com/honeycomb/img/team1.jpg" x="-30" width="284" height="166"></image>
  </pattern>
 </defs>
 <polygon points="71 0 142 41 142 123 71 166 0 123 0 41" fill="url(#img1)"></polygon>
</svg>

这是 CSS 代码：

 .main-svg {
      width: 282px;
      height: 330px;
    }

    polygon {
      stroke: rgba(0,0,0,0.5);
      stroke-width: 13px;
    }

和codepen结果：http://codepen.io/anon/pen/vLmxoo

谢谢！

【问题讨论】：

标签： html css svg

【解决方案1】：

这不是错误，这是 stroke 在 SVG 中的设计方式。与 HTML/CSS 中的 border 不同，它不在形状之外，而是在形状的边框上（一半在里面，一半在外面）。

您可以使用 stroke-position: inside | outside 来更改此行为 - 但它是 never implemented ? *

解决这个问题的唯一方法是

覆盖一个形状“更小”的笔画宽度 (here)
放大 svg，使边框不被切断 (here)

* 在 SVG 2.0 中有一个名为stroke-alignment的功能@

【讨论】：