6

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?

Machavity
  • 30,841
  • 27
  • 92
  • 100
Vasily Shakhov
  • 126
  • 1
  • 8
  • Have you tried putting the section before the element? – Erik Dahlström Oct 02 '12 at 07:53
  • 3
    See the last comment here: http://stackoverflow.com/questions/11514248/svg-use-elements-in-chrome-not-displayed?rq=1. If they haven't fixed this yet, you can try to replace with as a quick workaround. – skozin Dec 13 '12 at 17:49
  • Thanks, sam! Unfortunately this is still an issue in 6.0.4 – Eric May 08 '13 at 18:11

4 Answers4

7

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

Reed Spool
  • 843
  • 7
  • 15
5

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>​
Dean Or
  • 2,822
  • 2
  • 26
  • 25
2

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.

Veera
  • 32,532
  • 36
  • 98
  • 137
  • If You set the attribute with **JavaScript**, it works only by using `useElem.setAttributeNS ('http://www.w3.org/1999/xlink', 'xlink:href', '#your-href');`. Using the following will fail, even if it looks correct in the *Inspector*: `useElem.setAttribute ('xlink:href', '#your-href');`. – Márton Tamás Apr 17 '19 at 17:16
0

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

Community
  • 1
  • 1
dafyk
  • 1,042
  • 12
  • 24