Jam*_*s D 10 html5 internet-explorer svg
我想在html5页面中包含一个内联svg,其中包含引用URL引用的不同svg文件中的元素的"use"标记.这是SVG规范的一部分,并且在Chrome 33和FireFox 27中有效(我已尝试过).它似乎不适用于IE 11.
我的问题是:有没有办法做到这一点(同时仍然保持外部svg而不是使用javascript),这在所有三个浏览器中都有效？
在实际使用案例中,定义是静态的,大的,并且在多个页面之间以及每个页面上的多个内联svgs之间共享.我希望下载一次定义并缓存,然后在任何地方使用.
我知道用javascript可以做到这一点,但是由于这个使用范例是SVG规范的预期部分并且得到了Chrome和FF的支持,我希望我能这样做并且我只是错过了一些IE如何想要HTML或SVG的细节.
这是我的示例HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g externalResourcesRequired="true">
<use xlink:href="defs.svg#path-1" fill="#000000"></use>
<use xlink:href="defs.svg#path-2" fill="#000000"></use>
</g>
</svg>
</body>
</html>
这是上面引用的defs.svg文件:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path d="M10,10L20,10L20,20L10,20" id="path-1"></path>
<path d="M30,30L50,30L50,50L30,50" id="path-2"></path>
</defs>
</svg>
Key*_*oon 30
svg4everybody使用requestAnimationFrame,这导致过多的调用.我写了一个简单的轻量级polyfill,目的是在浏览器本身失败时支持带有外部引用的<use>元素.此polyfill使用特征检测而不是浏览器嗅探.它在github上:https://github.com/Keyamoon/svgxuse
现场演示:https://icomoon.io/svgxuse-demo
这个问题很老了，但我遇到过它并想对此给出一个基本提示：
正如https://developer.mozilla.org/de/docs/Web/SVG/Element/use所描述的，IE 11 不支持使用“use”svg-tag 从外部 URI 加载。
我建议使用其他库，例如https://github.com/jonathantneal/svg4everybody、https://github.com/iconic/SVGInjector
基本上，您可以在其中编写自己的 js-lib：
| 归档时间： |
|
| 查看次数： |
19994 次 |
| 最近记录： |