Writing your own function would be a solution. As for your example of line.setAttribute('x1', '0', 'y1', '0', 'x2', '150', 'y2', '150');
, this would work, but it's going to be difficult to modify, and will expect that the parameters as passed in a particular order.
I would have a function that accepts a single object:
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;
}
So, all together it would look something like this:
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);
If you're looking to go deeper then this and you need to do a lot of work with SVG in your project then a framework would probably be a worth considering.