V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
? http://diveintohtml5.org/
est
V2EX  ?  HTML

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

  •  
  •   est ·
    est · 198 天前 · 542 次点击
    这是一个创建于 198 天前的主题,其中的信息可能已经有所发展或是发生改变。

    腾讯云最新优惠活动来了:云产品限时1折,云服务器低至88元/年 ,点击这里立即抢购:9i0i.cn/qcloud,更有2860元代金券免费领取,付款直接抵现金用,点击这里立即领取:9i0i.cn/qcloudquan

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

    <img src="1.svg">
    
    <embed src="1.svg">
    

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

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

    4 条回复  ?  2023-10-18 10:47:54 +08:00
    sanmaozhao
        1
    sanmaozhao  
       198 天前   ?? 1
    查到的资料说,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
        2
    sanmaozhao  
       198 天前   ?? 2
    找到权威一些的文档了,看来就是这个原因了

    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
        3
    est  
    OP
       198 天前
    @sanmaozhao 感谢。。自己也折腾出来了个相同结论。。。https://blog.est.im/2023/stdout-10
    sanmaozhao
        4
    sanmaozhao  
       198 天前
    哈哈,找到原因应该回复一下本贴啊

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

    也是顺着几个链接找到的,和你博客里贴的基本相同
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2431 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:29 · PVG 21:29 · LAX 06:29 · JFK 09:29
    Developed with CodeLauncher
    ? Do have faith in what you're doing.


    http://www.vxiaotou.com