Browser Support Detection for SVGFragmentIdentifier (s)

Question

I use SVG sprites with SVGFragmentIdentifiers. eg:

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

Of course, I use the SVG file through CSS background, etc .:

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

Unfortunately, SVG fragment identifiers are not supported in webkit and other browsers at the moment: http://caniuse.com/svg-fragment

I use Modernizr to test browser capabilities. Is it possible to make Modernizr or an independent JavaScript Browsercheck for SVGFragmentIdentifiers?

I was thinking of creating an SVG object through jQuery and triggering an event :target. Later I can check if it is hidden or shown. maybe jQuery event.targetcan help here. But I'm not sure if this is suitable for background images, because it will be a matter of embedded svg.

Any ideas?

Answer 1

, ( , View , ):

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

. (1.0 1.1).