Menu
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
350
Support for clip-path in SVG is supported in all browsers with basic SVG support.
Use SVG as the Mask LayerThe SVG <mask> element can be used inside an SVG graphic to create masking effects.
Clipping refers to removing parts of elements defined by other parts. In this case, any half-transparent effects are not possible, it's an all-or-nothing approach. Masking on the other hand allows soft edges by taking transparency and grey values of the mask into account.
In SVG, the clipPath element is used to define a clipping path to clip elements. If you don’t want to use CSS to apply the clipping path to an element, you can do it in SVG using the clip-path presentation attribute. Have you seen/read my "Styling and Animating Scalable Vector Graphics with CSS" slides?
The clipping operation has been a part of SVG since 2000, and has moved into the CSS Masking module so that it now allows clipping HTML elements as well as SVG elements. The clip-path property is used to specify a clipping path that is to be applied to an element.
SVG offers a wide range of stroke properties. In this chapter we will look at the following: All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle. Sorry, your browser does not support inline SVG. The stroke-width property defines the thickness of a line, text or outline of an element:
You can see the triangle (the polygon) is clipped, but the circle isn’t. SVG also allows text to be used as a clipping path. Here I’ve kept the group that contains the circle and triangle, but changed the clipPath to a text element.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
