您好,我正在处理一个svg/js地图,其中包含许多小svg图形(城市地区)。我将每个图形放到一个自己的文件中,这样我的主svg文件仍然是可维护的,不会臃肿。
如何从另一个svg正确引用外部svg文件?
预期结果:在浏览器中打开1.svg并看到一个蓝色矩形。它的工作原理:w3c: use element
所以我试了一下: 1.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<use xlink:href="another.svg#rectangle"/>
</svg>
another.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<rect class="blue" x="558.5" y="570" width="5" height="5" />
</svg>
style.css
.blue { fill: blue; }
结果:
注意:我尝试过使用image元素,但在样式表中不起作用,即我得到了一个黑色的矩形,而不是蓝色的矩形。
重要提示:当您想要引用另一个SVG并且想要将引用的SVG作为正式文档结构的一部分时,您可以使用use AJAX来实现。
https://stackoverflow.com/questions/7215009
复制相似问题