Safari 6 svg标签使用问题

链接: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中呈现.

有什么帮助吗?

最佳答案
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>​

转载注明原文:Safari 6 svg标签使用问题 - 代码日志