我想在
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,20L10,20" id="path-1"></path> <path d="M30,30L50,50L30,50" id="path-2"></path> </defs> </svg>
解决方法
svg4everybody使用requestAnimationFrame,这会导致调用过多.我写了一个简单的轻量级填料,用于支持< use>浏览器本身失败时带有外部引用的元素.此polyfill使用特征检测而不是浏览器嗅探.它在github上：
https://github.com/Keyamoon/svgxuse
现场演示：https://icomoon.io/svgxuse-demo