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>标记。

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

1 个答案: