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

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

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

你好,我正在制作一张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也是从那里级联到克隆的树。

热门问答

TSF微服务无法查看JVM监控,显示空白?

工口Miku说唱歌手
推荐
回答来自于问答智囊团成员:邓愉悦 专栏:https://cloud.tencent.com/developer/user/6835587 原因分析 1、tsf-agent 版本过低。 使用 JVM 监控功能时,实例的 tsf-agent 需为 1.21.0 ...... 展开详请

直播推流失败,什么原因导致的呢?

青蛙克星哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
推荐
回答来自于问答智囊团成员:clairehou 专栏:https://cloud.tencent.com/developer/column/89786 经常会收到客户咨询,直播推流失败是什么原因导致。从云直播使用步骤上来讲,直播推流作为第一步,如果推流失败,后续的转码、录制、播放等...... 展开详请

视频播着播着就卡住了,什么原因造成的呢?

推荐
回答来自于问答智囊团成员:bellchen 专栏:https://cloud.tencent.com/developer/article/1734074 猜想 导致视频播放卡顿的原因有千千万万,常见的有如下: 1、网络较差,导致视频下载较慢,需要缓冲,因此卡住了; 可以下载文件到...... 展开详请

云通信图片语音消息发送失败,错误码70402?

宅女have fun……
推荐
回答来自于问答智囊团成员:linpeiyang@云通信 专栏:https://cloud.tencent.com/developer/article/1750251 客户提到文字信息没有失败,说明消息上行到云通信IM后台 -> 云通信IM后台处理 -> 云通信IM后台下发消息给用...... 展开详请

即时通信如何像QQ一样实现加好友、备注、进行好友分组?

五星格兰特就事论事不撕逼!三观不合删评价!
推荐
回答来自于问答智囊团成员:linpeiyang@云通信 专栏:https://cloud.tencent.com/developer/article/1750251 即时通信IM默认有2种关系链 好友 黑名单 均可以通过以下两种方式实现增删改查的功能: 调用REST API 调用...... 展开详请

CPU负载100%,但并看不到具体哪个进程导致的,?

鸿鹄认真生活 做出美好的产品 App/VR/美国市场
推荐
回答来自于问答智囊团成员:何刚 专栏:https://cloud.tencent.com/developer/user/6827370 安全分析 1、隐藏进程 经过busybox核实到存在隐藏进程,百度核实为挖矿病毒 📷 2、crontab 存在异常任务 📷 下载链接已经失效,I...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券