SVG剪切路径与描边

Question

我想要一个带边框的星形。如何在剪切路径内显示边框？

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

示例： http://codepen.io/neilhem/pen/VYdeaQ

- Rakhat

---

不确定clip-path是否符合您的要求...用多边形作为背景会更有意义吧？- https://dev59.com/3W865IYBdhLWcg3wd-ce - Paulie_D

Answer 1

我认为你不能在 clipPath 上显示描边，但是你可以在图像中和 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>

编辑：或者反过来，星星作为图像的一部分，也可以在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>

- pawel