具有SVG多边形笔划的错误

时间:2016-01-08 12:11:53

标签: html css svg

我用六边形图像蒙版创建了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

谢谢!

1 个答案:

答案 0 :(得分:3)

它不是一个Bug,它是stroke在SVG中设计的方式。与HTML / CSS中的border不同,它不会位于形状之外,而是位于形状的边界(内半部分和一半外部)。

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

解决问题的唯一方法是

  1. 覆盖一个较小的形状&#34;通过笔画宽度(here
  2. 的数量
  3. 放大svg,使边框不会被切断(here

  4. * 在SVG 2.0中,有一项名为stroke-alignment

    的功能