以下のコードを参照してください - Web サイトにインライン svg を含めようとしています。svg switch 要素を使用して、古いブラウザーで正常に機能を低下させるという適切な提案に従っています。これは、svg をサポートするブラウザが switch ブロックの最初の要素を使用するという考え方です。すべての svg タグを無視せず、switch ブロックの 2 番目の要素 (つまり、foreignobject タグ) に埋め込まれた img のみを表示するもの。
それは非常にうまく機能します...私のsvg（楽譜である）には必ずテキスト要素が含まれ、それらは古いブラウザによって（外部オブジェクトと同様に）レンダリングされます。
皮肉なことに、条件付きコメントを使用して IE8 以下でこれを処理するのは簡単です。
他の古いブラウザーの場合、svg テキストのクラスを再定義するforeignobject内にjavascriptの回避策があります。それは機能します...しかし、それは本当のハックのように感じます.
これを行うためのより良い方法はありますか (より良い JavaScript、CSS ソリューション、svg テキストを行う別の方法など)?
とにかく、コードの骨組みは次のとおりです。
<html>
<head>
<!-- this deals with elements using the svgtext class in old IE browsers -->
<!--[if lte IE 8]>
<style type="text/css">
.svgtext { display: none; }
</style>
<![endif]-->
<style type="text/css">
.donotdisplay { display: none; }
</style>
</head>
<body>
<svg ...>
<switch>
<g>
<!-- the svg goes here -->
<text class="svgtext">this gets rendered unless I deal with it</text>
</g>
<foreignObject ...>
<script type="text/javascript">
window.onload=function(){
var inputs=document.getElementsByTagName('text');
for(i=0;i<inputs.length;i++){
inputs[i].className='donotdisplay';
}
}
</script>
<!-- the replacement img tag goes here -->
</foreignObject>
</switch>
</svg>
</body>
</html>