CODEWITHSUNDEEP
htmlcsssvg
user5718206
user5718206

Reputation:

Bugs with SVG polygon stroke

I've created SVG with hexagon image mask and there is a bug when I'm trying to give stroke style to polygon: the stroke outsteps polygon. What can I do to create proper stroke?

Here is my code:

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

And here is CSS code:

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

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

And codepen results: http://codepen.io/anon/pen/vLmxoo

Thank you!

Upvotes: 2

Views: 427

Answers (1)

CoderPi
CoderPi

Reputation: 13211

It's not a Bug, it's the way stroke is designed in SVG. Unlike border in HTML/CSS it does not sit outside the shape, but on the border of the shape (beeing half inside and half outside).

You could use stroke-position: inside | outside to change this behaviour - but it was never implemented 🙁 *

The only way to fix that would be to

  1. overlay a shape that is "smaller" by the amount of the stroke-width (here)
  2. enlarge the svg so the border is not cut off (here)


* In SVG 2.0 there is a feature called stroke-alignment

Upvotes: 2

Related Questions