は、ネストされたSVGをブラウズする：ここだけのFirefox

で期待どおりに使用するのと同じフォルダに保存されている3つのSVGファイルです：は、ネストされたSVGをブラウズする：ここだけのFirefox

black_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="black"> 
    <rect x="10" y="10" width="10" height="10" fill="black" /> 
    </g> 
</svg>

green_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="green"> 
    <rect x="5" y="5" width="20" height="20" fill="green" /> 
    <use xlink:href="black_rectangle.svg#black" /> 
    </g> 
</svg>

red_rectangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 42 54" 
    version="1.1"> 
    <g id="red"> 
    <rect x="0" y="0" width="30" height="30" fill="red" /> 
    <use xlink:href="green_rectangle.svg#green" /> 
    </g> 
</svg>

エッジローカルホスト上red_rectangle.svgを閲覧する場合、Chromeとブレイブは、黒の四角形を表示しません。 Firefoxはです。

別のトピックのためのjscher2000からのガイダンスの後、私は、HTML5ファイルにred_rectangle.svg表示しようとした：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
<img src="red_rectangle.svg" /> 
</body> 
</html>

は結論：すべてのブラウザが緑や黒のものなしで、唯一の赤い四角形を表示...

誰もが何らかの回避策を知っていますか？ありがとうございました

もう一度：それはブラックホールに見えます。私は別の問題を解決することにしました。 svgのセットを1つに変換するXSLスタイルシートです。すべてのケースを網羅しているかどうかはわかりませんが、私の問題は解決します。

出典

2016-11-11 Florimond

''で使用する場合、SVGは自己完結型でなければなりません。 [関連する質問]（http://stackoverflow.com/questions/7655070/svg-within-html-does-not-showembeded-images）を参照してください。 –

さまざまなブラウザでネストされたsvgを取り除くための許容可能な方法が見つかりました。本当の他の即時の回避策がないように見えるので、この質問を閉じましょう。

出典

2016-11-27 20:56:21 Florimond

は、ネストされたSVGをブラウズする：ここだけのFirefox

答えて

関連する問題