javascript - 使用 svg 设置属性的更简单方法？

Question

我是 SVG 的新手，所以我为我的无知提前道歉。

我创建了一个 fiddle ，只是把玩一些东西。 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');

是的，当我在 fiddle 中尝试时，我知道它不起作用。但是有什么办法吗？如果不能，你不能的原因是什么？

Answer 1

编写您自己的函数将是一种解决方案。至于您的 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 做大量工作，那么框架可能值得考虑。