SVG clipPath with stroke

Question

I want to have star with border. How is it possible to show border inside clippath?

<svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;">
  <defs>
    <clipPath id="clipping">
      <polygon points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" />
    </clipPath>
  </defs>
</svg>

Example: http://codepen.io/neilhem/pen/VYdeaQ

Not sure a clip-path is what you are after...wouldn't a background to the polygon make more sense? - http://stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image — Paulie_D, Feb 26 '15 at 12:42

pawel · Accepted Answer · 2015-02-26T13:35:14.930

I don't think you can have a visible stroke on a clipPath, but you could use the star in your image as well as in the clipPath: http://codepen.io/anon/pen/OPEMXd

 <svg x="0" y="0" enable-background="new 0 0 98 94" xml:space="preserve" style="position: absolute;">
  <defs>
    <clipPath id="clipping">
      <polygon id="star" points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" />
    </clipPath>
  </defs>
</svg>
<svg width="95" height="90" viewBox="0 0 98 94">
  <use xlink:href="#star" />
  <image style="clip-path: url(#clipping);" ... />
</svg>

Edit: or the other way around, with star as part of the image also used in clipPath: http://codepen.io/anon/pen/GgGoxe

<svg width="95" height="90" viewBox="0 0 98 94">
  <defs>
    <clipPath id="clipping">
      <use xlink:href="#star" />
    </clipPath>
  </defs>  
  <polygon id="star" points="48 6 65 30 92 37 75 60 75 88 48 80 22 88 22 60 6 37 32 30" style="fill:none;stroke:#fadf0b;stroke-width:6" />
  <image style="clip-path: url(#clipping);" ... />
</svg>

SVG clipPath with stroke

1 Answers1