我想有带边框的星星。如何在剪辑路径内显示边框?

<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>
示例:ojita

最佳答案

我认为您无法在clipPath上看到可见的笔划,但是您可以对图像中的星星以及use中的星星进行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>

关于css - 带有笔画的SVG clipPath,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28742652/

10-11 18:58