I am looking for a way to test if a browser can have an external svg reference in the use
element:
<svg>
<use xlink:href="sprite.svg#icon-name"></use>
</svg>
This works in most modern browsers, but does not work in browsers like IE11 or Edge. Instead of testing to see if a browsers "name" is "x", I would rather use "feature detection" to know if I need to run a fallback.
I can't access the use
's Shadow DOM to see if an external reference was placed inside of it, and I don't think I can detect if "content" was actually placed in a temporary element referencing an external svg.
For example, I can't set up an element in this way:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS(
'http://www.w3.org/1999/xlink',
'xlink:href',
'sprite.svg#icon-name'
);
svg.appendChild(use);
document.body.appendChild(svg);
// Somehow test to see if it worked...
document.body.appendChild(svg);
Is there actually a way to feature detect this, or will I have to go with detecting browser "name"?