html5 - Any way to mask an SVG clipping path for CSS? -

i have div element want clip.

i'm able use -webkit-clip-path reference svg clippath element , clip 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 jsfiddle.

but how can cut shape out of shape? example, put triangle in red triangle? how can mask clipping path?

i've seen resources few years ago saying firefox supports it, need work chrome, haven't tried getting work firefox.

i've read chrome supports -webkit-mask-image, , i've seen examples of working (see twitter bird example). when tried recreate on jsfiddle, realized works on external svg files not inline svg. see jsfiddle.

clipping clipping path doesn't work, , masking clipping path doesn't seem work either, since clippath doesn't appear support mask attribute.

anyone have solution, or must wait chrome capable of this?

when set clippath polygon, not limited convex shapes.

if specify

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

that draw external triangle (the same had) , go inside , cut triangle.

updated fiddle

if this, have remember draw inner triangle in oposite turning sense outter triangle

editing

yes, can clip clip.

see 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 note:

first, syntax not userfriendly. far know, if want use 5 polygons, have chain of them 1 other.

second, since want (or @ least seems want) have polygons "cut thru", have make them 'negative' . that's achieved wrapping huge rectangle around ( 9999 coordinates). news is code can copy paste.

anyway, have been warned in answer, technology isn't really stable.