我想在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>