生成的SVG图像不显示 [英] Generated SVG image doesn't display

问题描述

我正在开发一个JavaScript类来显示所有SVG对象，但是当我创建元素image时，浏览器不会显示它。虽然如果我复制生成的代码并将其放入另一个文档中，则会显示图像。

I'm developing a JavaScript class to show all SVG objects, but when I create the element "image", the browser doesn't display it. Though if I copy the generated code and put it in another document, the image is displayed.

当我使用Firebug的检查器搜索图像时，对象出现但图像是没有显示。

When I searched the image using Firebug's inspector, the object appears but the image is not displayed.

我使用 appendChild（）创建了对象， setAttribute（）和 setAttributeNS（）

I created the object using appendChild(), setAttribute() and setAttributeNS()

这是生成的代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" >
<image width="50" height="50" xlink:href="logo.png" y="20" x="20" id="d"></image>
</svg>

我做错了什么？

推荐答案

问题在于命名空间。这是动态创建图像的正确形式：

The problem were the namespaces. This is the correct form to create images dynamically:

image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'flower.png');

更多信息可以在 MDN的'命名空间速成课程'。

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