为啥 img 和 embed 标签对同一个 svg 展示效果不一样?

2023-10-17 21:32:23 +08:00
 est

遇到个蛋痛事。对于同一个 1.svg ,页面里分别用 <img><embed> 嵌入

<img src="1.svg">

<embed src="1.svg">

前者不能展示 svg 内部的<image>图片 ,后者能展示。

在线 demo 有人遇到过这个问题吗?

1133 次点击
所在节点    HTML
4 条回复
sanmaozhao
2023-10-18 09:48:27 +08:00
查到的资料说,img 标签嵌入的 svg ,是无法加载任何外部资源的
包含 svg 文件里引用的 image 、font 等

请看这个链接
https://vecta.io/blog/best-way-to-embed-svg

This is mainly because images with <img> tags are not allowed to refer to external resources including CSS, fonts and scripts, for security reasons.

但是我目前还没查到官方的文档说明
sanmaozhao
2023-10-18 09:56:22 +08:00
找到权威一些的文档了,看来就是这个原因了

https://www.w3.org/wiki/SVG_Security

Markup languages like HTML (and SVG itself) can reference SVG as an image with the <img> tag (HTML namespace) or <image> tag (HTML or SVG namespace).

If an SVG file is fetched as image, then certain requirements apply to this document:

The SVG document is not allowed to fetch any resources. This also applies to scripts, stylesheets or images.
est
2023-10-18 10:42:22 +08:00
@sanmaozhao 感谢。。自己也折腾出来了个相同结论。。。https://blog.est.im/2023/stdout-10
sanmaozhao
2023-10-18 10:47:54 +08:00
哈哈,找到原因应该回复一下本贴啊

我也查了有一会儿,才找到根源

也是顺着几个链接找到的,和你博客里贴的基本相同

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/982908

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX