SVG fill pattern using a reference to a definition in a file

Question

The following attempt to make a rectangle with a pattern fill doesn\'t seem to work in Safari 6.1, Firefox 30, or Chrome 36, even though the W3 spec seems to say that a I can us

Answer 1

You've a load of syntax errors in your patterns.svg file. Missing " characters round attribute values, an unclosed circle element, patternunits instead of patternUnits.

SVG standalone must be valid XML, it's not as forgiving as html and it's case sensitive on attribute names too. If you loaded the patterns.svg file directly, browsers would tell you all these things.

With all this fixed (as below) this works in Firefox. I'm not sure Chrome/Webkit have implemented this yet.

<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
            <circle r="10" cx="12" cy="10" fill="purple"/>
        </pattern>
    </defs>
</svg>