6

リンク: 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 でレンダリングされないようです。

何か助けてください。

4

4 に答える 4

7

OPと同じ問題がありました。2つのステップを実行して解決しました

  1. <use>と<defs>を 2 つの異なる に分けました<svg>(この手順が必要かどうかは不明で、他の理由でも実行する必要がありました)。補足ですが、<svg>のみが<defs>ある場合は、 を使用style="display: none;"してレイアウト内のスペースをとらないようにすることができます。

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

お役に立てれば。2014 年 12 月 19 日現在、Safari バージョン 7.1.2 で必要かつ機能しています。

于 2014-12-19T18:37:35.773 に答える
5

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>​
于 2013-05-30T17:31:55.920 に答える
0

正しい http content-type ヘッダーを使用しており、ドキュメントを有効な XML として提供しているかどうかを確認してください。詳細については、この類似の質問を参照してください。

于 2012-10-17T23:13:25.187 に答える