Css 带笔划的SVG clipPath
我想要有边框的星星。如何在clippath中显示边框Css 带笔划的SVG clipPath,css,svg,Css,Svg,我想要有边框的星星。如何在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
<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>
示例:我认为你不能在
clipPath
上有一个可见的笔划,但是你可以在你的图像和clipPath
中使用星星:
不确定剪辑路径是您想要的…多边形的背景不是更有意义吗-
<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>
<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>