サファリ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、クローム、Firefoxの、サファリ5.1）で[OK]を表示しますが、新しいSafariの6のみ1円でレンダリングされる。すべての<の使用>タグはSafari 6でレンダリングされていないようです。

何か助けてください？

Answer 1

sam.kozinの答えが私のために働いた。この答えが実際に可視性を持っているように。

<使用を交換して.../<使用に>は... >は< /だから、>

を使用します。

<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

正しいhttpコンテンツタイプヘッダーを使用していて、有効なXMLとしてドキュメントを提供しているかどうかを確認してください。この類似の詳細情報question。

Answer 3

を私は同じ問題が、OPを持っていました。私は

1. が<use>を分離し、2つの異なる<svg>年代に<defs>（このステップが必要であるかどうかわからないが、また他の理由のためにそれをしなければならなかった）、手順2を実行して、それを解決しました。副読本の場合、には<defs>しか含まれていない場合は、style="display: none;"を使用してレイアウト内のスペースを取らないようにすることができます。

2. は私のHTMLで<use>を含む<svg> ABOVE <defs>を含む<svg>移動しました。このステップは非常に重要です。

希望します。今日のSafariバージョン7.1.2には、12/19/14の時点で必要です。

Answer 4

私は<use href="">をFirefox/Chromeでは問題なくレンダリングしていましたが、Safariではレンダリングしていませんでした。だから私は<use xlink:href="">に変更しなければなりませんでした。これはSafariでのレンダリングの問題を修正しました。