如何正确引用SVG中的外部SVG文件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (211)

你好,我正在制作一张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

提问于
用户回答回答于

从SVG规范中定义的链接到

CSS2选择器不能应用于(概念上)克隆的DOM树,因为它的内容不是正式文档结构的一部分。

这意味着1.svg中的选择器不适用于克隆的DOM树。

那么为什么不直接从another.svg引用样式表呢?这应该适用于所有浏览器,以及两者<use><image>

另一种选择是<use>在主svg文档(1.svg)中设置元素的样式,因为style也是从那里级联到克隆的树。

用户回答回答于

试着这样做:

square:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    width="1000" height="1000">
    <rect x="558.5" y="570" width="5" height="5" id="rectangle" />
</svg>

用它:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<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" class="blue"/>
</svg>

扫码关注云+社区

领取腾讯云代金券