0

テストページがあります: 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)。

4

1 に答える 1

1

外部用の w3c テストスイート ページがあります<use>: http://www.w3.org/Graphics/SVG/Test/20110816/svg/struct-use-05-b.svg

実装マトリックスは、IE9 が外部をサポートしていないことを示唆しています。<use>なぜ Firefox が不合格としてリストされているのかはわかりませんが、その時点でさえ、その特定のテストに合格する必要があったと思います。

この問題については、タグ<object>の onload イベントでスクリプトを実行する必要があります。<object>基本的に競合状態があるため、他の UA で運が良かっただけだと思います。

おそらく IE は、html 構文を使用したスタイルシートのインクルードをサポートしていません。代わりにXML 構文を試してください。<?xml-stylesheet href="mystyle.css" type="text/css"?>

画像に外部ファイルの使用を許可することはプライバシー リークであり、Firefox、Chrome、および Safari が許可しない理由です。CSS をデータ URL に変換した場合は、link 要素を使用できます。

于 2015-02-11T10:52:52.023 に答える