使用javascript以编程方式创建SVG图像元素

正如我的标题所说，我正在尝试使用javascript以编程方式在HTML页面中创建SVG图像元素。由于某些原因，我的基本javascript代码无法工作，但是如果我使用raphaeljs库，它就可以正常工作。因此，我的js显然存在问题——我似乎不知道它是什么

（注意：目标浏览器为FF4+）

下面是一个基本页面，其中包含一个html版本，这是我试图在顶部实现的目标：

实例：

SVG本机属性（不包括

xlink:href

）不共享SVG命名空间；您可以只使用

setattributes

而不是

setattributes

，或者使用

svgimg.setAttributeNS(null,'x','0');

比如说

在这里，工作：

请注意，我将您的小提琴改为正确使用XHTML，以便SVG在所有主要浏览器中都能很好地在其中工作。

供进一步参考

我一直在使用下面的函数创建SVG元素，但由于

xlink:href

必须使用

setAtributeNS

创建，因此无法创建图像

下面的代码已更正为这样做（动态创建任何svg元素）

示例用法：

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

---

parent

用于组织svg组标记上的“层”。

您拯救了我的一天，您是一位绅士和学者，先生。一个问题是，图像需要从地址域完全链接，或者也可以通过相对/绝对路径从内部服务器链接？@Phrogz TIAS是什么意思？@Cheshire:试试看。我想你应该在创建新元素后插入它。这就是“parent”参数的作用。谢谢。我在大约8个小时的寻找解决方案后找到了它。

svgimg.setAttributeNS(null,'x','0');

function makeSVG(parent, tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs){
                if(k=="xlink:href"){
                    el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]);
                }else{
                    el.setAttribute(k, attrs[k]);
                }
            }
        }

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});