0

Whenever I try to use an svg as an image in html using the tag, any images referenced within the svg file using <image xlink:href=""> tag won't display.

This fails to display any bitmaps at all in the svg in browsers (firefox, chome, chromium, safari) but does display the image in internet explorer).

HTML FIle

<!DOCTYPE html>
<html>
<body>
<img src="svg.svg" height="100" width="200" />
</body>
</html>

SVG File

 <svg version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events" height="100" width="200">
    <image height="100" width="200" xlink:href="image1.jpg" />
    </svg>

However if I place the exact same code directly in the html file as

<svg height="100" width="200"> 
<image height="100" width="200" xlink:href="image1.jpg" />
</svg>

It works.

Or if I reference the same svg file with <object data=""> it also works. Any vector objects (eg. rects) in the svg file also work fine with <img> or <object>.

If I load the svg file directly it works properly in all browsers.

Why is the img tag in html breaking my image tag xlinks in the svg file?

4

1 回答 1

0

使用嵌入的任何 SVG<img>都不能引用外部对象（如其他图像）。这是浏览器出于隐私原因而有意实现的功能。

您可以使用嵌入您的 SVG <object>。或者，如果您确实需要使用<img>，请将 SVG 中的外部图像引用更改为数据 URI。

于 2015-03-19T04:32:50.957 回答