檢測瀏覽器對SVGFragmentIdentifier的支持

我正在使用SVGF sprite與SVGFragmentIdentifiers。像這樣：檢測瀏覽器對SVGFragmentIdentifier的支持

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
    <style><![CDATA[ 
     .sprite { display: none; } 
     .sprite:target { display: inline; } 
    ]]></style> 
</defs> 
<g class="sprite" id="icon1">...</g> 
<g class="sprite" id="icon2">...</g> 
<g class="sprite" id="icon3">...</g> 
</svg>

當然我通過CSS背景等採用SVG文件：

.icon1 { 
    background-image: url(mysprite.svg#icon1); 
    background-size: contain; 
}

不幸的是SVG片段標識符沒有在WebKit和其他瀏覽器支持在這個時候：http://caniuse.com/svg-fragment

我正在使用Modernizr檢查瀏覽器功能。是否有可能爲SVGFragmentIdentifiers製作Modernizr或獨立的JavaScript Browsercheck？

我想過通過jQuery創建SVG對象並觸發一個關於它的:target事件。稍後我可能會檢查它是隱藏還是顯示。也許jQuery的event.target可能在這裏幫助。但我不確定這是否適合於背景圖像，因爲這將是內聯svg的問題。

任何想法？

來源

2014-04-03 Mnnn

對於什麼是值得的，瀏覽器是不是真的*假設*支持這樣的片段標識符。請參閱：http://stackoverflow.com/questions/16042387/svg-spritesheet-targeting-with-css – cimmanon

我想你可以嘗試以下方法（我很困惑，如果View是檢查片段標識符的支持是正確的）：

function supportsSvgView() { 
    return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#View", "1.1"); 
}

檢查this fiddle在不同的瀏覽器。對於（1.0 & 1.1），請檢查Read more here並檢查all feature strings。

來源

2014-04-03 18:26:05

我不認爲這是一個可靠的方法來檢查它。最近也有人提出讓hasFeature方法總是返回「true」，請參閱此主題：http://lists.w3.org/Archives/Public/www-svg/2014Jan/0042.html。 –

hasFeature將始終返回true，除了svg功能，所以答案應該是正確的https://developer.mozilla.org/en-US/docs/Web/API/DOMImplementation/hasFeature – ChaosClown

有用的測試支持http：// www。 codedread.com/svgtest.svg – ChaosClown

檢測瀏覽器對SVGFragmentIdentifier的支持

回答

相關問題