Line and variable

Question

Can I use this in HTML and Javascript?
<svg>
<line x1="var:a" x2="var:b"/>
</svg>
<script>
var a = 10
var b = 100
</script>

Answer 1

You can. Like this:

<svg></svg>
<script>
var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('x1','0');
newLine.setAttribute('y1','0');
newLine.setAttribute('x2','200');
newLine.setAttribute('y2','200');
newLine.setAttribute("stroke", "black")
document.querySelector("svg").append(newLine);
</script>