Safari 6 svg tag use issues

Question

Link : http://jsfiddle.net/xkpeD/

or just

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  <use xlink:href="#:example" x="20" y="20"/>
  <defs>
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  </defs>
</svg>​

It displays ok in all browsers (IE9, Chrome, Firefox, Safari 5.1), but in new Safari 6 only 1 circle is rendered. Seems that all <use> tags doesn't rendered in Safari 6.

Any help please?

Answer 1

sam.kozin's answer worked for me. Just so that this answer actually has visibility.

Replace <use ... /> with <use ...></use>

So:

<svg width="300px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  <use xlink:href="#:example" x="20" y="20"></use>
  <defs>
    <circle id=":example" cx="50" cy="50" r="20" fill="pink" fill-opacity="0.5"/>
  </defs>
</svg>​

Answer 2

I had the same issue, OP. I solved it by doing 2 steps

1. Separated the <use> and the <defs> into 2 different <svg>'s (not sure if this step is necessary, also had to do it for other reasons). Side note, if an <svg> only has <defs>, you can use style="display: none;" to make it not take space in the layout.

2. Moved the <svg> containing the <defs> ABOVE the <svg> containing the <use> in my HTML. This step is crucial.

Hope this helps. Necessary and working for Safari Version 7.1.2 as of today, 12/19/14

Answer 3

I was using <use href=""> that was rendering without issues in Firefox / Chrome, but not in Safari. So I had to change to <use xlink:href=""> and this fixed my rendering issues in Safari.

Answer 4

Check if you are using correct http content-type header and serving your document as valid XML. More info in this similiar question.