检测浏览器是否支持SVGFragmentIdentifier(s)

Question

检测浏览器是否支持SVGFragmentIdentifier(s)

4

我正在使用包含SVGFragmentIdentifiers的SVG sprites。做法如下：

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

有什么想法吗？

- Mnnn

说实话，浏览器并不真正“应该”支持这样的片段标识符。请参见：https://dev59.com/gXHYa4cB1Zd3GeqPGgNK - cimmanon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Alpha · Answer 1

我认为你可以尝试以下方法（我对于检查片段标识符支持的正确方式是否为View感到困惑）：

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

在各种浏览器中检查这个fiddle。在这里阅读更多并检查所有功能字符串（1.0和1.1）。