Question

我正在使用SVG精灵与SVGFragmentIdentifiers。像这样：

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

不幸的是，目前webkit和其他浏览器不支持SVG片段标识符：http://caniuse.com/svg-fragment

我正在使用Modernizr检查浏览器功能。是否可以为SVGFragmentIdentifiers创建Modernizr或独立的JavaScript Browsercheck？

我考虑过通过jQuery创建一个SVG对象并触发一个:target事件。稍后我可能会检查它是隐藏还是显示。也许jQuery的event.target可能在这里有所帮助。但我不确定这是否适合背景图像，因为这将是内联svg的问题。

有什么想法吗？

Answer 1

我认为您可以尝试以下方法（如果View是检查片段标识符支持的正确方法，我会感到困惑）：

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

在各种浏览器中查看this fiddle。 Read more here并检查all feature strings（1.0＆amp; 1.1）。

检测浏览器对SVGFragmentIdentifier的支持

1 个答案: