你好，我正在制作一张svg / js地图，其中包含许多小图片（城市区）。我把每一个图形放到一个自己的文件中，这样我的主要svg文件仍然可以维护，不会臃肿。

我如何正确引用另一个svg的外部svg文件？

预期结果：在浏览器中打开1.svg并查看蓝色矩形。它应该如何工作：w3c：使用元素

所以这就是我试过的：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; }

结果：

• Firefox：一个蓝色的矩形（正是我想要的）
• Chrome：没有
• 歌剧：黑色的矩形

注意：我尝试过使用图像元素，但没有与样式表一起工作，即我得到了一个不是蓝色的矩形。

如果想引用另一个SVG 并希望引用的SVG成为正式文档结构的一部分，则可以使用AJAX来完成此操作。

https://bugs.webkit.org/show_bug.cgi?id=12499