在HTML中内联的SVG <image>标记不在浏览器中加载图像

Question

尝试使用HTML页面在SVG中加载图像:

<html>
...
<svg>
<image x="330" y="137" width="320" height="38" preserveAspectRatio="none" href="/img/title.png"></image>
</svg>
...
</html>

除了图像之外,svg中的所有其他元素都会加载(路径形状文本).有什么方法可以在浏览器中使用它？我试过Chrome,Firefox,IE.所有浏览器都缺少图像.

使用Chrome我发现Chrome甚至没有发送图像请求.我有预感,IE和Firefox也一样.

有解决方案吗

Answer 1

你需要使用:

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

此外,如果要动态创建图像,则需要执行以下操作:`svgImage.setAttributeNS('http://www.w3.org/1999/xlink','xlink:href','title.png'); ` (12认同)
与此同时,您需要将文档作为XHTML提供,并在SVG元素上声明正确的`xlink`命名空间:`<svg ... xmlns:xlink ="http://www.w3.org/1999 /的xlink">`. (4认同)
@NeilFraser非常感谢你!!!! 你关于在图像上使用"setAttributeNS"而不仅仅是"setAttribute"的评论是如此重要,它帮助我在HOURS和HOURS之后解决了这个问题,为什么图像没有显示出来.谢天谢地. (2认同)