Any way to mask an SVG clipping path for CSS?

css, html, svg

Solution

When you set the clippath polygon, you are not limited to convex shapes.

If you specify

<polygon points="0 100, 220 290, 300 30, 220 100, 220 220, 180 100, 220 100, 300 30"></polygon>

That will draw an external triangle (the same that you had) and then go inside it and cut another triangle.

updated fiddle

If you do it like this, you just have to remember to draw the inner triangle in the oposite turning sense than the outter triangle

EDITING

Yes, you can clip a clip.

See this updated demo

The CSS is

<svg width="0" height="0">
    <clipPath id="clip1">
       <polygon points="0 100, 220 290, 300 30"></polygon>
    </clipPath>
    <clipPath id="clip2" clip-path="url(#clip1)">
        <polygon points="0 0, 9999 0, 9999 9999, 0 9999, 0 0, 150 140, 180 190, 220 30, 150 140"></polygon>
    </clipPath>
</svg>

2 things to note:

first, the syntax for this is not very userfriendly. As far as I know, if you want to use say 5 polygons, you have to chain all of them one to the other.

second, since you want (or at least seems that you want) to have the polygons "cut thru", you have to make them 'negative' . That's achieved wrapping it with a huge rectangle around it ( The 9999 coordinates). The good news about that is that it is a code that you can copy paste.

Anyway, as you have been warned in another answer, this technology isn't really really stable.

Problem

I have a `DIV` element that I want to clip. I'm able to use `-webkit-clip-path` to reference an SVG `clipPath` element and clip the element: Example HTML ``` <svg width="0" height="0"> <clipPath id="clipping"> <polygon points="0 100, 300 30, 220 290" /> </clipPath> </svg> <div id="tiles"></div> ``` Example CSS ``` #tiles { background:red; width:300px; height:300px; -webkit-clip-path: url(#clipping); } ``` See the JSFiddle. But how can I cut a shape out of that shape? For example, put another triangle in the red triangle? How can I mask the clipping path? I've seen some resources from a few years ago saying that Firefox supports it, but I need it to work for Chrome, so I haven't even tried getting it to work with Firefox. I've read that Chrome supports `-webkit-mask-image`, and I've seen examples of it working (see the Twitter bird example). But when I tried to recreate it on jsfiddle, I realized that it works on external SVG files but not inline SVG. See the jsfiddle. Clipping a clipping path doesn't work, and masking a clipping path doesn't seem to work either, since `clipPath` doesn't appear to support the `mask` attribute. Anyone have a solution, or must I wait for Chrome to be capable of this?

Original source