SVG <image> tag inlined in HTML not loading image in browser
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.
加载中,请稍侯......
精彩评论