Safari 6 svg标签使用问题

Question

链接:http://jsfiddle.net/xkpeD/

要不就

<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>?

它在所有浏览器(IE9,Chrome,Firefox,Safari 5.1)中都显示正常,但在新的Safari 6中,只渲染了1个圆圈.似乎所有<use>标签都没有在Safari 6中呈现.

有什么帮助吗？

Answer 1

我有同样的问题,OP.我通过两步完成了它

1. 把<use>它<defs>分成两个不同<svg>的(不确定这个步骤是否必要,还必须出于其他原因).旁注,如果<svg>只有<defs>,您可以使用style="display: none;"它来使布局中不占用空间.

2. 移动<svg>包含<defs>上述<svg>包含<use>在我的HTML.这一步至关重要.

希望这可以帮助.截至今天12/19/14,Safari版本7.1.2是必需的并且正在工作

Answer 2

sam.kozin的回​​答对我有用.这样,这个答案实际上具有可见性.

将<use ... />替换为<use ...> </ use>

所以:

<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>?