HTML 中的 SVG 不显示嵌入的图像

Question

我有一些类似于下面的代码，在我的网站上显示了一个 svg 图像。

<a href="http://site.com/path/to/file.svg">
<img src="http://site.com/path/to/file.svg">
</a>

svg 文件如下所示：

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <title>Annotation</title>
        <image xlink:href="http://site.com/path/to/image.jpg" id="svg_1" height="400" width="600" y="0" x="0"/>
    </g>
    <g>
        <title>Layer 1</title>
        <g id="svg_2"/>
            <path fill="none" stroke="#000000" stroke-width="3" id="svg_3".....
            <line id="svg_4" y2="249" x2="134" y1="248" x1="155" stroke-width="3" stroke="#000000" fill="none"/>
            <path d="m97,177c0,-1 -0.292892,-1.292892 -1,-2c-0.707108,-0.707108......
        </g>
</svg>

正在加载 svg（通过带有正确标题的 php 等）并且可以看到 svg 中的线条和对象，但看不到图像。

如果我右键单击并在新窗口中打开链接，我可以看到背景图像。如果我然后切换回 svg 链接在 html 中显示图像的第一个选项卡。

浏览器似乎没有加载图像，所以我尝试了各种方法，比如在它旁边加载<img src="http://site.com/path/to/image.jpg"/>。普通图像有效，但 svg 中的图像仍然无法显示。

最好避免像 iframe 这样的事情，因为在 img 标签上设置大小并且整个 svg 缩放是好的（除非你可以在 iframe 中这样做？）

任何指针将不胜感激。

TL;DR

svg 中的图像只有在没有 html 的情况下在第二个选项卡中打开时才会显示

Answer 1

SVG <img> 标签是 SVG 标准的子集。这是为了使它们的行为尽可能接近其他图像类型。例如，SVG 文件可以运行 JavaScript。如果用户将 SVG 图像上传到图像共享站点，则允许使用原本安全的 <img> 标记显示的图像运行任意 JavaScript 是出乎意料的行为。加载外部资源等其他行为也是如此。如果您想要完整的行为，那么您可以内联您的 SVG 图像或使用 <object> 标签。