問題タブ [xlink]

SVG をヘッダー/ナビゲーションとして使用して Web サイトを作成しています。最初に、次のように、svg 内にハイパーリンク テキストを作成しました。

しかし、jquery スクロールを追加すると、xlinks では機能しないことがわかりました。

これを修正するために、テキストに絶対位置を設定して SVG をオーバーレイし、これをスタイルに追加することにしました。

アイテムをリストとして持っています：

私はそれを動作させましたが、1980px 幅のウィンドウでのみ、svg 全体が再スケーリングされ、テキストが同じパターンに従っていないためです。 http://fiddle.jshell.net/78eh5u52/9/show/

しかし、私は「連絡先」ボタンが表示されている方法を好みます。それはsvgとともに再スケーリングされるためですが、フィドルでわかるように、スムーズスクロール効果はそれに適用されません

これを修正する方法は 2 つあります。テキストを svg 内に配置する方法に戻り、スクロール効果を有効にする方法を見つけます。または、テキストのサイズと位置を基になる svg とまったく同じようにスケーリングする方法を見つけます (svg の上に svg?)

これを修正するためにどのようにアドバイスしてもらえますか?また、何を調べる必要がありますか?

ここに私の完全なコードがあります:

http://jsfiddle.net/78eh5u52/9/

次のindex.htmlファイルがあります。

およびファイルred.svg:

ブラウザでは、index.html ファイルに 2 つの円が表示されます。青と赤。大丈夫です。

クリックした後に円の色を変更したい。「インライン」の青い円で機能します。しかし、挿入された svg (赤) では何も起こりません。

インポートした画像に色を付けるにはどうすればよいですか?

または、svg ファイルをインポートする他の方法はありますか? URLからファイルをインポートする必要があるため、jQuery.load()を使用できませんfile://。

Chrome (FF、Safari ではない) では、外部リンク (xlink:href) SVG テンプレートのサブ要素をクラス/ID/要素参照でスタイル設定できません。

私が何か間違ったことをしているかどうか知りたいですか？他の誰かがこの問題に遭遇しましたか?

HTML:

デモ.svg:

CSS:

より詳細なデモをここに投稿しました：

http://monopine.com/svg-demo/

リンクを作成したい場合は、HTMLで次のように記述します。

アンカーを行うには、次のように記述します。

リンクを作成するには、次のように記述します。

しかし、SVG (および XLINK、XPOINTER) を使用するのは非常に困難です。

しかし、私が書くと：

開いたページがexample.com#anchorではなく.comだけだったのですが、何かの間違いでしょうか？また、xlink でアンカーを作成するには、ID を追加する必要がありますか?

ありがとう

テストページがあります: http://benfrain.com/playground/svg-test/

その上に、同じ SVG をいくつかの方法 (img、object、inline、および background image) に挿入しました。

useまた、SVG 内から定義を再利用する方法も実装しました (object挿入方法と「インライン」挿入方法のみ)。

コンソールでは、各挿入メソッドから SVG コンテンツにアクセスしようとしていることがわかります (スクリプトを介して img と背景画像にアクセスできないことはわかっています。要点を証明しているだけです)。

ただし、Internet Explorer (IE9+) のどのバージョンでも、object挿入方法は外部 CSS の読み込みに失敗する（コメントに記載されているように、IEには代替リンクメカニズムが必要です）内部から参照され（xlinkを介して、機能していれば6px幅のストロークが表示されます）、それはJavaScript 経由ではアクセスできません (他のすべてのエバーグリーン ブラウザで動作します)（私の間違い）。

誰でも理由を明確にできますか？http://www.w3.org/TR/html5/embedded-content-0.html#the-object-elementの仕様に目を通してみましたが、いくつかの専門的事項は私の理解を超えていることを告白しなければなりません。

更新: 以下の Robert のコメントに加えて、上記のテスト ページにいくつかの調整を加えました。

まず、スクリプトでオブジェクトにアクセスできます (初歩的なミス)。ただし、奇妙な点はまだたくさんあります。

SVG にこの形式のリンクがある場合: <?xml-stylesheet href="styles.css" type="text/css"?>IE11 は、img、background-image、inline、または object を介してページに挿入されているかどうかにかかわらず、そのスタイルシート内のスタイルを SVG に適用します (Safari/Firefox/Chrome は、 SVG はインラインまたは経由で挿入されますobject)。

外部ファイルのシンボル内のシンボルを参照しようとしていますが、Chrome または Firefox で動作させることができません。

HTMLファイルの先頭で定義されている場合、別のシンボルでシンボルを参照できます。これで問題ありません。

しかし、このコードを外部ファイルに入れようとすると、シンボル内のシンボルが表示されません。

ファイル内シンボルが外部シンボルを参照する組み合わせも試しましたが、うまくいきませんでした:

どうすればこれを機能させることができますか？多くのシンボルがあり、それらすべてを html ファイルで定義する必要はありません。

私は積極的に（そして何時間も）ウェブでこれに対する答えを検索しましたが、あえて尋ねると見つけることができませんでした. JSでプログラミングしてSVGを作成するためのライブラリであるRaphael.jsを使用しています。リンクに図形を埋め込みたい。

SVG では、名前空間が SVG タグに追加され、xlink の使用を通知します。

次に、たとえば、リンクに埋め込まれた形状を作成することができます (この優れたブログ tutorials.jenkov.com/svg/a-element.html ):

ここにフィドルがあります：小さな長方形

Raphael ライブラリ (および私の例では jquery) を使用すると、コードは次のようになります。

そして、ここにフィドルがあります：ここを見てください

問題は、それが機能しないことです。このコードは次の行まで実行されました。

完全に描画された形状を表示しますが、その後...消去されます。もう 1 つの興味深い点は、コード全体の実行後、つまり 2 行後に DOM ドキュメントが希望どおりであることを Firefox が示していることです (これは、私の評判では明らかに十分ではありません...)。しかし、簡単に再現できます。つまり、DOM ノードではっきりと確認できます。

誰かが私の過ちを教えてくれたら嬉しいです。

どうもありがとう

PNG画像をデータuriに変換し、このデータuriをhtml要素に挿入することに成功しました。

これにより、データ uri が正しいことが証明されます。

しかし、何らかの理由で、クライアント側の dataviz で d3js を使用する方法を見つけることができなかったため、データ URI に期待どおりのラスター イメージが表示されてしまいました。動作を妨げるものがあります。

ネイティブの d3js xmlns 名前空間で競合が発生していると思われますか、それとも入力ミスですか? 私のフィドルhttp://jsfiddle.net/xGUsu/106/があります。何か案が ？

( 「なぜ base64 でエンコードされた png が svg 内に表示されないのですか? JS: データ URI 埋め込みのために image.png を base64 コードにエンコードする方法」に関連)

タグを使用して svg を html の画像として使用しようとすると、タグを使用して svg ファイル内で参照されている画像<image xlink:href="">が表示されません。

これにより、ブラウザ (firefox、chome、chromium、safari) の svg にビットマップがまったく表示されませんが、Internet Explorer では画像が表示されます)。

HTMLファイル

SVG ファイル

ただし、まったく同じコードをhtmlファイルに直接配置すると、

できます。

または、同じ svg ファイルを参照し<object data=""> ても機能します。svg ファイル内のベクター オブジェクト (例: rect) も、 または で正常に動作し<img>ます<object>。

svg ファイルを直接ロードすると、すべてのブラウザで適切に動作します。

HTML の img タグが svg ファイルのイメージ タグ xlinks を壊すのはなぜですか?