相关疑难解决方法(0)

您好我正在制作svg/js地图,其中包含许多小svg图形(城区).我将每个图形放入一个自己的文件中,这样我的主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