問題タブ [xlink]

次の xhtml ファイルは、WebBrowser コントロール ( https://msdn.microsoft.com/en-us/library/2te2y1x6.aspx )に読み込んでいる epub カバー ページの正確なコピーです。

.NET Web Browser クラスが xlink:href 属性をサポートしていない理由を知りたいです。

動作するように変更<image width="600" height="900" xlink:href="cover.jpeg"/>し<image width="600" height="900" src="cover.jpeg"/>ます。

置換正規表現を書くこと以外に、代替手段はありますか? HTMLをネイティブ形式のままにしたいと思います。

https://jsfiddle.net/swoq9g3f/1/

xlink:hrefjavascript でa を変更した後、Internet Explorer (v11.0.9600.17728) で単純な SVG が正しく描画されないという問題が発生しています。

IE で SVG だけをレンダリングすると、2 つの同心円が得られます。JavaScript はxlink:href、<use>要素#def1の値を以前の値である に設定します。この後、IE は大きな円のみをレンダリングし、小さな円はその後ろに隠します。小さい円は svg ドキュメントの後半にあるため、常に大きい円の上にレンダリングする必要があります。への呼び出しもいくつか含めましforceRedraw()たが、問題を修正できません。

この問題は、Chrome または Firefox では発生しません。これは何が原因ですか？問題を回避する方法はありますか?

SVG:

Javascript:

すべてのxlinkの使用箇所を SVG の単純なインライン xml に置き換え、その後「 defs」セクションを削除し、すべてのboo : 属性を削除する必要があります。これが必要なのは、使用する予定の SVG ビューアが xlink をサポートしていないためです。

初期の簡略化された XML

期待される結果

私は xlink:href を使用して svg を表示しています。サファリとクロムの両方で動作しています。しかし、Firefox にはありません。何か考えはありますか?:

アップデート ：

ここのインデックスにベースセットがあります

svg が firefox で動作しません。

次に、ベースを追加$locationProvider.html5Mode({enabled: true, requireBase: false});して.config完全に削除すると、svgが表示されます。問題は、ベースなしでAPIを呼び出さないことです。

.on()jQuery 、 SVG xlink、および Internet Explorer / Safariの組み合わせでかなり厄介な問題に遭遇したようです。

削減されたケースの例は次のとおりです: http://codepen.io/mikehdt/pen/MwqORK

この例には 2 つのボタンがあります。1 つは SVG を使用し、もう 1 つは SVG コードを直接埋め込みます。

SVG とボタンは次のようになっています (ドキュメントの後半にあるものを.icons-svg試してみると、Safari が悲しくなるように見えるので、最初に注意してください)。xlink

見栄えを良くするためのいくつかの超基本的な CSS:

jQuery は、次のように、動的バインディングのために on を使用しています。

Chrome や Firefox と同様に、SVG を使用するリンクの + をクリックすると、警告メッセージが表示されます。ただし、IE と Safari では、イベントを防止してリンクをたどるスクリプトのトリガーに失敗します。

埋め込まれている SVG をクリックすると意図したとおりに直接動作しますが、アセットを適切に再利用するには、これは実行不可能なソリューションです。

機能するもの：

使用せずに使用する.on()と.click()、すべてのブラウザーが機能しますが、動的バインディングが失われます。使用.on()しても使用しない場合xlinkは、すべてのブラウザーが機能します。この問題が発生するのは、.on()との組み合わせだけです。xlink

なぜこれを行うのですか？

アイコンに SVG を使用する場合は、リソースを外部に保持し (したがってキャッシュ可能)、動的バインディングを必要とする Ajax イベントをサイトに配置します。

他の誰かがこれに遭遇したことがありますか？この組み合わせで IE と Safari をうまく動作させることができましたか? これはブラウザや jQuery のバグでしょうか、それとも Chrome と Firefox が誤って対処しているものでしょうか?

svg で xlink:href のフィルタを指定する方法はありますか? たとえば、特定の親/svg からの のみを参照したい。そのページに複数の svg があり、両方に同じ ID の要素が含まれている場合、xlink:href がどの svg であるかに関係なく、xlink:href は常に最初のインスタンスを参照するようです。

例えば、 ...

...

理想的には、一意の div id を参照として使用できるようにしたいと考えています。例えば、

HTML コードは、jquery スクリプトで作成されます。含めたい画像は、同じディレクトリ内のローカルです。xlink:href に絶対パス (file:/// を前に付けたもの) を指定しようとしましたが、 の有無にかかわらず、機能しません。パスとファイル名が正しいことは間違いありません。Xubunutu 14.04 + Firefox (最新) で動作します。

何が原因でしょうか?

Robert Longson のおかげで解決しました。

で作成した画像

そこで、私が取り組んでいる Web サイトでいくつかの SVG を使用することにしました。それらはインライン HTML ではありません。代わりに、object タグを使用してそれらにリンクしました。私はそれらをリンクとして使用しており、xlink メソッドを使用するルートをたどりました。私はそれらを CSS でスタイリングしていますが、1 つのことを除いて正常に動作しています。:visited 状態には独自のデフォルト スタイルがあるようで、:visited セレクターが CSS で応答しないため、このデフォルト スタイルを取り除くのに苦労しています。何か案は？

XML:

CSS:

私は XML のスタイルを設定しているため、これについての方法が間違っている可能性があることに気付きました。もしそうなら、 xlink :visited 状態のスタイリングを変更する方法を知っている人はいますか?

この質問が説明するのとほぼ同じ問題があります。

Polymers で動的に挿入したい svg シンボルがいくつかありますdom-repeat。

関数を使用して、配列に必要なシンボルからすべての ID を取得し、{{icons}}それを true にループして、svg を挿入します。

私のコードは次のようになります。

タグに id をハードコーディングする#bedと、<use>すべて問題なく、開発ツールで次のように表示されます。

しかし、 data-binding を使用したい場合{{item.id}}、アイコンは表示されず、開発ツールでは次のようになります。

これを解決する方法についてのアイデアは大歓迎です