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

【问题标题】：Programmatically creating an SVG image element with javascript使用 javascript 以编程方式创建 SVG 图像元素
【发布时间】：2011-10-05 19:31:43
【问题描述】：

正如我的标题所说，我正在尝试使用 javascript 在 HTML 页面中以编程方式创建 SVG 图像元素。出于某种原因，我的基本 javascript 代码无法正常工作，但是如果我使用 raphaeljs 库，它可以正常工作。所以我的 js 显然有问题 - 我似乎无法弄清楚它是什么。

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

这是一个基本页面，其中包含我想要达到的最高目标的 html 版本：

<html>
    <head>
        <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
    </head>
    <body>

       <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        id="test1"
        height="200px"
        width="200px">
            <image
            id="testimg1"
            xlink:href="http://i.imgur.com/LQIsf.jpg"
            width="100"
            height="100"
            x="0"
            y="0"/>
        </svg>

        <hr />

        <p id="testP1">


        </p>
        <hr />      
        <p id="testP2">


        </p>        
    </body>
</html>

这是我的 javascript：

var paper = Raphael(document.getElementById("testP1"), 200, 200);
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100);



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg');
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink');
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200');
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2');

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2');
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0');
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0');

svg.appendChild(svgimg);

document.querySelector('#testP2').appendChild(svg);

现场示例：http://jsfiddle.net/Yansky/UVFBj/5/

【问题讨论】：

标签： javascript svg raphael

【解决方案1】：

SVG 原生属性（不包括xlink:href）不共享 SVG 命名空间；您可以只使用setAttribute 而不是setAttributeNS，或者使用

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

例如。

在这里，正在工作：http://jsfiddle.net/UVFBj/8/

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

【讨论】：

您拯救了我的一天，您是一位绅士和一位学者，您认为先生。
一个问题，图片是否需要完全从地址域链接，或者也可以从内部服务器以相对/绝对路径链接？
@Phrogz TIAS 是什么意思？
@Cheshire：试试看。

【解决方案2】：

供进一步参考。

我一直在使用下面的函数来创建 SVG 元素，但无法创建图像，因为必须使用 setAtributeNS 创建 xlink:href。

以下代码已被更正以执行此操作（动态创建任何 svg 元素）

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'});

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

【讨论】：

我认为您应该在创建新元素后插入它。这就是你有“父”参数的原因。
谢谢你。在寻找解决方案大约 8 小时后，我找到了它。