HTML中的SVG不显示嵌入图像 [英] SVG within HTML does not show embeded images

问题描述

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

svg文件如下所示：

 < svg width =600height =400xmlns =http://www.w3.org/2000/svgxmlns：xlink =http：/ /www.w3.org/1999/xlink\"> 
< g> 
< title>注解< / title> 
< image xlink：href =http://site.com/path/to/image.jpgid =svg_1height =400width =600y =0x = 0/> 
< / g> 
< g> 
< title>第1层< / title> 
< g id =svg_2/> 
   <路径d =m97,177c0，-1 -0.292892，-1.292892 -1，-2c-0.707108，-0.707108 ...... 
< / g> 
 < / svg> 
  

svg正在加载中（通过php加上正确的头文件等）如果我右击并在新窗口中打开链接，我可以看到背景图像。如果我然后切换回第一个选项卡，其中的图像显示在html中的svg链接。

好像浏览器没有加载图像，所以我尝试了各种各样的东西像在它旁边加载< img src =http://site.com/path/to/image.jpg/> 。一个在svg中仍然不会显示。

最好避免像iframe那样在img标签上设置尺寸，并且整个svg缩放比例很好（除非你可以在iframe中做到这一点？）

任何指针都将不胜感激。

TL; DR

在svg中的图像不显示，直到你打开它的第二个标签没有html周围它

解决方案

SVG < img> 标签是SVG标准的一个子集。这是为了使它们尽可能地接近其他图像类型。例如，SVG文件可以运行JavaScript。如果用户要将SVG图像上传到图像共享网站，那么允许以其他安全的< img> 标签显示的图像运行任意JavaScript，这是意想不到的行为。加载外部资源等其他行为也一样。如果你想要完整的行为，那么你可以内嵌你的SVG图像或使用< object> 标签。

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

解决方案

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.

这篇关于HTML中的SVG不显示嵌入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！