HTML 中的 SVG 不显示嵌入图像
我有一些类似于下面的代码，在我的网站上显示了 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 中，则图像将显示。
浏览器似乎没有加载图像，所以我尝试了各种方法，例如加载 
最好避免像 iframe 这样的事情，因为在 img 标签上设置大小，并且整个 svg 缩放效果很好（除非您可以在 iframe 中执行此操作？）
任何指针将不胜感激。
TL;DR
svg 中的图像不会显示，除非您在第二个选项卡中打开它，周围没有 html
I have a bit of code something like the following showing an svg image on my site.
<a href="http://site.com/path/to/file.svg">
<img src="http://site.com/path/to/file.svg">
</a>
The svg file is something like the following:
<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>
The svg is loading (via php with the correct headers etc) and can see the lines and objects in the svg, but not the image.
If I right click and open the link in a new window i can see the background image. If i then switch back to the first tab where the svg link is in html the image is showing.
It seems like the browser is not loading up the image, so i tried various things like loading <img src="http://site.com/path/to/image.jpg"/> next to it. the plain image works but the one in the svg still wont show.
It would be good to avoid things like iframe as setting the size on the img tag and the whole svg scaling is good (unless you can do this in an iframe?)
Any pointers will be greatly appreciated.
TL;DR
images in svg dont show till you open it in a second tab without html around it
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
SVG
![]()
![]()
SVG
<img>tags are a subset of the SVG standard. This is so that they behave as close as possible to other image types. For example, SVG files can run JavaScript. If a user was to upload SVG image to an image sharing site, it is unexpected behavior to allow images displayed with the otherwise safe<img>tag to run arbitrary JavaScript. The same also goes with other behaviors such as loading external resources. If you want the full behavior, then you can inline your SVG image or use the<object>tag.