inline svg in html - 正常に機能を低下させる方法

以下のコードを参照してください - 自分のウェブサイトにインラインsvgを含めるようにしています。私はa neat suggestionの後にsvg switch要素を使用して、古いブラウザでは正常に機能しなくなるようにしています。その考え方は、svgをサポートするブラウザはスイッチブロックの最初の要素を使用するということです。すべてのsvgタグを無視せず、スイッチブロックの第2の要素（すなわち、異物タグ）に埋め込まれたimgを表示するだけのものである。inline svg in html - 正常に機能を低下させる方法

これは本当にうまくいきます...私のsvgは必ずテキスト要素を含んでいて、古いブラウザでレンダリングされます（foreignオブジェクトも同様です）。

皮肉なことに、条件付きコメントを使用してIE8以下で対処するのは皮肉なことです。

他の古いブラウザでは、私はsvgテキストのクラスを再定義するforeignobjectの中でjavascriptを回避しています。それは動作します...しかし、それは本当のハッキングのように感じます。

これを行うには良い方法がありますか？（javascript、CSSソリューション、svgテキストを行う別の方法...）ここではIE8以外のブラウザおよびそれ以前のためのアイデアだ

<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>

出典

2012-05-06 Chris Walshaw

で私は、特徴検出のための引当金を有している場合には、RaphaelJSで見てね。どちらも使用されていませんが、どちらも使える価値があります。 – halfer

IE8以外のSVGをサポートしていない他の古いブラウザでは、サポートしようとしていますか？ –

@halfer - Modernizrはドキュメント全体に 'svg'または' no-svg'クラスを追加します。これはコードでチェックすることも、CSSセレクタでチェックすることもできます。自動的には問題は解決しませんが、チェックするのはかなり簡単です。 –

CSS-のために：とにかくここ

は、コードのむき出しの骨である（text要素を認識するためにJSベースのSHIVを必要としています。）唯一の解決策は、

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test Case</title> 

<!--[if lte IE 8]> 
    <script type="text/javascript"> 
     document.createElement("text"); 
    </script> 
<![endif]--> 

    <style type="text/css"> 
     @namespace svg "http://www.w3.org/2000/svg"; 
     text { display: none; } 
     svg|text { display: inline; } 
    </style> 
    </head> 
    <body> 

    <svg> 
     <switch> 
     <g> 
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
      <text x="20" y="120">this gets rendered unless I deal with it</text> 
     </g> 
     <foreignObject> 
      <p>Use an SVG capable browser</p> 
     </foreignObject> 
     </switch> 
    </svg> 

    </body> 
</html>

ここでの考え方は、SVGのインラインをサポートするブラウザは、その後、缶「http://www.w3.org/2000/svg」名前空間の中にSVG要素を置くことによってそれを行うことですCSSで対処する必要があります。

Firefox 12、IE9、Chrome 18 Opera 11.6（SVGを表示）、Firefox 3.6およびSafari 5.0でフォールバックを確認しました。または多分Modernizr -

JSFiddle http://jsfiddle.net/rGjKs/

出典

2012-05-06 11:15:28 Alohci

ありがとう！また、フォールバックを示す古いアンドロイドブラウザでも動作します。 Modernizrライブラリは興味深いようですが、私はこのソリューションがはるかに簡単で、javascriptを避けて好きです。 –

パイプ文字 '|'は 'svg | text'の中で何を意味しますか？ – Sathvik

@Sathvik - 名前空間接頭辞と要素のローカル名の間の単なる区切り文字です。多かれ少なかれXMLの "："（コロン）文字に相当します。 – Alohci

inline svg in html - 正常に機能を低下させる方法

答えて

関連する問題