是否可以让 img 标签显示包含地址的 svg 图片？ [复制]答案

【问题标题】：Is it possible to make the img tag display svg images that cointain addresses inside it? [duplicate]是否可以让 img 标签显示包含地址的 svg 图片？ [复制]
【发布时间】：2020-03-29 09:21:33
【问题描述】：

我创建了以下 SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="150" height="150">
    <rect
        x="5"
        y="5"
        width="140"
        height="140"
        style="fill:white;stroke:black;stroke-width:1"
        id="rect2" 
    />
    <image
        y="50"
        x="80"
        id="image76"
        xlink:href='https://image.flaticon.com/icons/svg/46/46441.svg'
        preserveAspectRatio="none"
        height="60"
        width="60" 
    />
    <image
        y="50"
        x="10"
        id="image76"
        xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png'
        preserveAspectRatio="none"
        height="60"
        width="60"
    />
</svg>

我已经设法使用object 标记显示它，如下所示，它工作正常：

<object type="image/svg+xml" data="image.svg"></object>

结果是这样的：

但是，当我尝试使用 img 标签时，我得到以下结果：

<img src="image.svg"/>

当我尝试使用img 标签显示此 svg 文件时，其中的图像消失了。我知道会发生这种情况，因为我使用https://image.flaticon.com/icons/svg/46/46441.svg 和https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Android_robot.png/646px-Android_robot.png 之类的地址作为我的图像，而不是在这个svg 中写入base64 图像。但是因为object 标签可以实现，所以我很想知道img 标签是否也可以实现。是否可以让img 标签打开像这样的 svg 文件？还是img标签的限制？

【问题讨论】：

标签： html svg

【解决方案1】：

<img> 中没有加载任何文档，无法请求任何外部资源，无法执行脚本，无法接收任何用户事件。

对于您的位图图像，您必须将其作为data: URI 嵌入到 svg 本身中。

【讨论】：