html - 是否可以让 img 标签显示包含其中地址的 svg 图像？

Question

我创建了以下 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标签的限制？

标签： htmlsvg

Answer 1

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

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