我是SVG的新手,所以我提前为我的无知道歉.

我创造了一个小提琴,只是玩弄东西. http://jsfiddle.net/a46p8/

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width','200');
svg.setAttribute('height','200');


var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('width', '0');
line.setAttribute('height', '0');
line.setAttribute('x1', '0');
line.setAttribute('y1', '0');
line.setAttribute('x2', '150');
line.setAttribute('y2', '150');
line.setAttribute('stroke', 'rgb(255,0,0)');
line.setAttribute('stroke-width', '2');

svg.appendChild(line);

var ct = document.getElementById('container'); 
ct.appendChild(svg);

setAttributes真的没有更简单的方法吗？例如,是否可以将它们与以下内容组合：

line.setAttribute('x1', '0', 'y1', '0', 'x2', '150', 'y2', '150');

是的,我知道当我尝试小提琴时它不起作用.但有没有办法做到这一点？如果没有,你不能的原因是什么？

解决方法:

编写自己的函数将是一个解决方案.至于你的line.setAttribute(‘x1′,’0′,’y1′,’0′,’x2′,’150′,’y2′,’150’)的例子,这可行,但它会发生难以修改,并期望参数以特定顺序传递.

我会有一个接受单个对象的函数：

function Line(obj){
    var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    for(prop in obj) {
        line.setAttribute(prop, obj[prop])  
    }
    return line;
}

function SvgContainer(obj) {
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    for(prop in obj) {
        svg.setAttribute(prop, obj[prop])  
    }
    return svg;
}

所以,它们一起看起来像这样：

var svgParent = new SvgContainer({
    'width': 200,
    'height': 200
});

var lineOne = new Line({
    'width': 0,
    'height': 0,
    'x1': 0
        // etc
});

var ctn = document.getElementById('container');
svgParent.appendChild(lineOne);
ctn.appendChild(svgParent);

如果您希望深入了解这一点,并且您需要在项目中使用SVG进行大量工作,那么框架可能是值得考虑的.