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

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

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

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

提问于
用户回答回答于

试着这样做:

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>

热门问答

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

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

服务器中了 aliyun.one 挖矿木马怎么办啊?

推荐
回答来自于问答智囊团成员:何刚 专栏:https://cloud.tencent.com/developer/user/6827370 【原理分析】 为什么会删除不了crontab,原因是 /etc/ld.so.preload 被加载了木马so文件。 -rwxrwxrwx. 1...... 展开详请

物联网MQTT证书认证的clientid和密钥认证的clientid的拼接方式怎么不一样啊?

用户3560085

腾讯云物联网团队 · 研发工程师 (已认证)

推荐已采纳
不管是密钥认证还是证书认证,clientid都是productID + deviceName,可以参考https://cloud.tencent.com/document/product/634/14630 这个mqtt.fx中使用证书认证的示例,其clientid也是通过pro...... 展开详请

云上访问云下Redis数据时偶发性高延时?

叮当叮当スターバーストするには
推荐
回答来自于问答智囊团成员:王超超-Ryanccwang 专栏:https://cloud.tencent.com/developer/column/89781 故障现象 通过和客户沟通,客户反馈通过公网直接访问IDC-A Redis数据库时不存在偶发性延时超过1S现象,通过云上访...... 展开详请

专线变更后,新专线通道启用后路由条目缺失?

推荐
回答来自于问答智囊团成员:王超超-Ryanccwang 专栏:https://cloud.tencent.com/developer/column/89781 原因分析 1、核查客户割接前后专线通道路由条目,发现缺失明细路由条目 📷 变更前路由条目 📷 变更后路由条目 2、核查专...... 展开详请

服务器外网丢包怎么办?

咕噜sasa心之所向,金石为开
推荐
回答来自于问答智囊团成员:张晗 专栏:https://cloud.tencent.com/developer/user/3172953 解决方案: 1、可以更换本地网络(例如连接手机热点等更换本地运营商出口)ping服务器测试是否正常,如果正常可以初步判断和运营商网络有关系。 2...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券