SVG <image> tag inlined in HTML not loading image in browser_问答_开发者

SVG <image> tag inlined in HTML not loading image in browser

开发者 https://www.devze.com 2023-03-19 01:02 出处：网络

Trying to load an image in SVG using an HTML page: <html> ... <svg> <image x=\"330\" y=\"137\" width=\"320\" height=\"38\" preserveAspectRatio=\"none\" href=\"/img/title.png\"></

Trying to load an image in SVG using an HTML page:

<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</sv开发者_JAVA百科g>
...
</html>

All other elements in the svg load up (paths shapes text) except image. Any way to get this working in browsers? I've tried Chrome, Firefox, IE. All browsers are missing the image.

Using Chrome I found that Chrome doesn't even send the request for the image. I have a hunch it's the same for IE and Firefox.

Any solutions?

You need to use:

<image ... xlink:href="...">

See the SVG Document Structure spec.

This is not the case in question, but I ran across a similar issue with an <image href="/path/to/file.svg"> tag not showing up in Edge, while working correctly in Firefox and Chrome.

It turns out that if you don't explicitly set both a height and a width attribute on the <image> tag Edge won't show the image. This is not the case in Chrome and Firefox where width alone was enough.