clip-path not working in SVG sprite -

clip-path not working in SVG sprite -

(live illustration @ http://codepen.io/rwwl/pen/xbnljp)

i'm including svgs in app using <symbol> element (see https://css-tricks.com/svg-symbol-good-choice-icons/ total details why), , icons — ones include clip-path — not rendering when include icons in pages <use> element.

<svg style="display: none"> <symbol id="icon-pin" viewbox="0 0 24 24" enable-background="new 0 0 24 24"> <path fill="none" stroke="#2f3137" stroke-width="2" stroke-miterlimit="10" d="m12 2c8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3c18.7 5 15.7 2 12 2zm0 0" /> <clippath id="pin-clip"> <path d="m12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" /> </clippath> <path clip-path="url(#pin-clip)" fill="#2f3137" d="m4.5 1.2h15v15h-15z" /> </symbol> </svg> </div> <h2>normal inline svg</h2> <svg id="inlinepin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" enable-background="new 0 0 24 24"> <path fill="none" stroke="#2f3137" stroke-width="2" stroke-miterlimit="10" d="m12 2c8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3c18.7 5 15.7 2 12 2zm0 0" /> <clippath id="inline-pin-clip"> <path d="m12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" /> </clippath> <path clip-path="url(#inline-pin-clip)" fill="#2f3137" d="m4.5 1.2h15v15h-15z" /> </svg> <h2>inline svg using sprite</h2> <svg> <use xlink:href="#icon-pin"> </svg>

here's how it's rendering:

it's broken in same way across chrome/firefox/safari, seems i'm not understanding way other elements need referenced in svg, when symbol beingness pulled in via use. ie11 not rendering correctly, in different way (no dot in middle of pin, no solid square box others).

the problem caused first line

<svg style="display: none">

removing display: none render svg referencing inline sprite fine.

this @ first seem bit odd since spec tells us

the ‘display’ property not apply ‘symbol’ element; thus, ‘symbol’ elements not straight rendered if ‘display’ property set value other none, , ‘symbol’ elements available referencing when ‘display’ property on ‘symbol’ element or of ancestors set none.

but reading further down spec becomes apparent why setting display: none causes unexpected rendering:

the ‘display’ property affects direct rendering offscreen canvases [...] setting display: none on kid of ‘clippath’ element prevent given kid element contributing clipping path.

thus, setting display: none globally on svg inhibits rendering of these offscreen canvases leaving incomplete clip path, although can still referenced. removing display-attribute root svg , setting straight clippath demonstrate same behaviour.

to hide sprite svg go like

<svg width="0" height="0"> update:

ie , firefox seem bit more stringent on rendering offscreen canvases when putting clippath within symbol. since symbols never rendered, contained clippath maintain missing offscreen rendering , can hence not meaningfully applied element. should set clippath right outside symbol works in ie, ff , chrome.

<svg> <clippath id="pin-clip"> <path d="m12 11.2c-1.4 0-2.5-1.1-2.5-2.5s1.1-2.5 2.5-2.5 2.5 1.1 2.5 2.5-1.1 2.5-2.5 2.5zm0 0" /> </clippath> <symbol id="icon-pin" viewbox="0 0 24 24" enable-background="new 0 0 24 24"> <path fill="none" stroke="#2f3137" stroke-width="2" stroke-miterlimit="10" d="m12 2c8.3 2 5.3 5 5.3 8.7c0 1.2.3 2.3.9 3.3l5.4 9.9c.1.1.2.2.4.2.1 0 .3-.1.4-.2l5.4-9.9c.5-.9.9-2.1.9-3.3c18.7 5 15.7 2 12 2zm0 0" /> <path clip-path="url(#pin-clip)" fill="#2f3137" d="m4.5 1.2h15v15h-15z" /> </symbol> </svg>

svg