inline svg in html - 如何優雅地退化？

請參閱下面的代碼 - 我試圖將內聯svg包含在我的網站中。我正在關注a neat suggestion以使用svg開關元素，以便在舊版瀏覽器上優雅地降級。這個想法是，支持svg的瀏覽器使用開關塊中的第一個元素;那些不會忽略所有svg標記，只顯示掩埋在開關塊的第二個元素（即外部對象標記）中的img。inline svg in html - 如何優雅地退化？

它的作品真的很好......只是我的SVG（即活頁樂譜）必然包括文本元素，他們得到渲染（還有foreignobject）由舊的瀏覽器。

諷刺的是，很容易在IE8及以下使用條件註釋來處理這個問題。

對於其他舊的瀏覽器我有一個JavaScript工作圍繞重新定義了類SVG的文本foreignobject內。它的工作原理...但它感覺像一個真正的黑客。

是否有更好的方法來做到這一點（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>

來源

2012-05-06 Chris Walshaw

我想看看RaphaelJS，在具有規定特徵檢測的情況下 - 或許Modernizr的。也不用，但他們都值得一試。 – halfer

除了支持SVG的IE8之外，還有哪些其他的老款瀏覽器正在嘗試支持？ –

@halfer - Modernizr將在整個文檔中添加一個'svg'或'no-svg'類，它可以在代碼或CSS選擇器中檢查。它不會自動修復這個問題，但它很容易檢查。 –

下面是其他比IE8和瀏覽器更早的想法爲CSS-（這需要基於JS SHIV承認text元素。）唯一的解決辦法，

<!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瀏覽器內嵌，通過將SVG元素融入「http://www.w3.org/2000/svg」命名空間這樣做，然後可以在CSS中解決。

測試在Firefox 12，IE9，鉻18歌劇11.6，其示出了SVG，和Firefox 3.6和Safari 5.0，其示出了回退。

的jsfiddle在http://jsfiddle.net/rGjKs/

來源

2012-05-06 11:15:28 Alohci

謝謝！也適用於顯示回退的舊版android瀏覽器。 Modernizr庫看起來很有趣，但我非常喜歡這個解決方案，因爲它更簡單並且避免使用JavaScript。 –

在'svg | text'中管道字符'|'是什麼意思？ – Sathvik

@Sathvik - 它只是名稱空間前綴和元素本地名稱之間的分隔符。或多或少等同於XML中的「：」（冒號）字符。 – Alohci

inline svg in html - 如何優雅地退化？

回答

相關問題