[Solved] clip-path using SVG not working right in Chrome.

[skielbasa]

On my site’s homepage I defined a clipping group at the top of the document using inline SVG.

<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0" style="position: absolute; margin-left: -100%;">
    <defs>
        <clipPath id="print">
            <path fill="#00AEEF" d="M169.3 131.1c-29.4 0-72.3 0-72.3 0s41.3 8 41.3 72c0 0 50.3 0 69.9 0C208.1 150.1 175.4 131.1 169.3 131.1z"/>
            <path fill="#00AEEF" d="M103.9 100.7c0-14-11.3-25.3-25.3-25.3s-25.3 11.3-25.3 25.3c0 14 11.3 25.3 25.3 25.3S103.9 114.7 103.9 100.7zM67.1 100.7c0-6.3 5.1-11.4 11.4-11.4S90 94.4 90 100.7s-5.1 11.4-11.4 11.4S67.1 107 67.1 100.7z"/>
            <path fill="#00AEEF" d="M78.6 137.1c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3 25.3-11.3 25.3-25.3S92.6 137.1 78.6 137.1zM78.6 173c-6.3 0-11.4-5.1-11.4-11.4s5.1-11.4 11.4-11.4S90 155.3 90 161.6 84.9 173 78.6 173z"/>
            <path fill="#00AEEF" d="M131.1 0C58.7 0 0 58.7 0 131.1s58.7 131.1 131.1 131.1 131.1-58.7 131.1-131.1S203.5 0 131.1 0zM219 213.1h-10.9 -69.9H128v-10.3c0-2.2-0.5-4.7-0.6-6.7H78.2c-19.3 0-34.9-15.6-34.7-34.9 0.1-13.3 7.8-24.7 18.9-30.5 -11.2-5.8-18.9-17.4-18.9-30.9 0-19.2 15.6-34.7 34.7-34.7h83.8 2c19.2 0 34.7 15.6 34.7 34.7 0 11.4-5.5 21.5-14 27.8 4.4 2.9 8.9 6.8 13 11.6 6.3 7.2 11.4 15.7 14.9 25.3 4.1 11.3 6.4 24.2 6.4 38.3V213.1z"/>
        </clipPath>   

        <clipPath id="web">
            <circle fill="#755487" cx="196.1" cy="75.7" r="4"/>
            <circle fill="#755487" cx="207.6" cy="75.7" r="4"/>
            <circle fill="#755487" cx="184.5" cy="75.7" r="4"/>
            <path fill="#755487" d="M47 188.1h169v-103H47V188.1zM166.2 119.6c-1.4-0.9-2.5-1.9-2.5-3.8 0.1-2 1.7-3.9 3.8-3.9 1.1 0 2.1 0.5 2.9 1.1l29.5 19.6c1.6 1 2.7 1.9 2.6 3.9 0 2.1-1.1 2.9-2.6 3.9l-29.4 19.5c-0.9 0.6-1.9 1.2-3.1 1.2 -2 0-3.7-1.9-3.7-3.9 0.1-1.8 0.9-2.7 2.4-3.6l25.6-17L166.2 119.6zM115.4 158.8l26.8-45.9c0.9-1.4 1.7-2.7 3.5-2.7 1.9 0 3.5 1.5 3.5 3.4 0 1.1-0.4 2-0.8 2.8l-27.5 47c-0.9 1.5-1.7 2.5-3.5 2.5s-3.6-1.5-3.6-3.4C113.8 161.2 114.7 160 115.4 158.8zM63.3 132.6L92.7 113c0.9-0.6 1.9-1.1 2.9-1.1 2.1 0 3.7 1.9 3.8 3.9 0 1.9-1.1 2.9-2.5 3.8l-25.5 16.9 25.6 17c1.4 0.9 2.3 1.9 2.4 3.6 0 2-1.7 3.9-3.7 3.9 -1.2 0-2.2-0.6-3.1-1.2l-29.4-19.5c-1.6-1-2.6-1.8-2.6-3.9C60.5 134.4 61.7 133.6 63.3 132.6z"/>
            <path fill="#755487" d="M131.1 0C58.7 0 0 58.7 0 131.1s58.7 131.1 131.1 131.1 131.1-58.7 131.1-131.1S203.5 0 131.1 0zM222 85.4v107.8H41V87.6v-2.2V69.6c0-3.2 2.2-5.5 5.4-5.5h169.9c3.2 0 5.8 2.3 5.8 5.5V85.4z"/>
        </clipPath>   

        <clipPath id="environmental">
            <polygon fill="#4E4E56" points="96.6 136.9 99.3 136.8 168.4 134.4 164.2 98.9 76.8 106.5 74.6 169.8 88.9 170.4 92.2 143.3 92.5 140.6 92.9 137 "/>
            <path fill="#4E4E56" d="M131.1 0C58.7 0 0 58.7 0 131.1s58.7 131.1 131.1 131.1 131.1-58.7 131.1-131.1S203.5 0 131.1 0zM91.2 30l91.9 12.3 5.8 95.6 -12.6 0.4L171.1 94l-0.4-3.1 -3.1 0.3 -80.5 7L91.2 30zM72.8 102.6l95.2-8.3 5.2 44.1L99.4 141l-2.8 0.1 -0.3 2.7 -3.8 31 -22.4-0.9L72.8 102.6zM62.6 224.1l3.2-47.1 103.2 4.4 10.5 42.7H62.6zM182.7 224.1l-0.2-0.9 -10.5-42.7 -0.6-2.4 -2.4-0.1 -73.3-3.1 3.7-30.7 94.9-3 3.8 83H182.7z"/>
        </clipPath>   
    </defs>
</svg>

Down the page I reference it like so:

<svg width="262.2" height="262.2" viewBox="0 0 262.2 262.2">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://srkdesign.com/wp-content/themes/srkdesign-v12/images/print-backdrop.jpg" width="300" height="300" style="clip-path: url(#print)"></image>
</svg>

<svg width="262.2" height="262.2" viewBox="0 0 262.2 262.2">   
    <image xlink:href="http://srkdesign.com/wp-content/themes/srkdesign-v12/images/web-backdrop.jpg" width="300" height="300" style="clip-path: url(#web)"></image>
</svg>

<svg width="262.2" height="262.2" viewBox="0 0 262.2 262.2">   
    <image xlink:href="http://srkdesign.com/wp-content/themes/srkdesign-v12/images/env-backdrop.jpg" width="300" height="300" style="clip-path: url(#environmental)"></image>
</svg>

This used to work fine across browser, however as of at least Chrome 38 (36 is the last version I remember it working in) it now only clips the last path in the clipping group (deleting nodes in devtools can change what gets clipped). It continues to be fine in FireFox, Safari and IE.

Site for reference: http://srkdesign.com/

Any ideas on what I can do to fix this?

[skielbasa]

Apparently I wasn’t the only one stumped by this issue. That said it seems to be working on the latest Chrome Canary again. It must have just been a browser bug and not something I coded poorly. There were a ton of open SVG related bug in the tracker that had just been opened when I was looking into this issue; this was probably related to one of those bugs.

[Author]

Posts