What is the easiest way to change the attributes of an SVG element through JS?

Question

JavaScript

Hello everybody! I want to change the x2, y2 coordinates of the line element to the values ​​of some function from the mouse coordinates and the coordinates of other SVG elements. I am writing a JS script. I work through getAttribute, setAttribute like this:

<svg width="100" height="100">
  <line id="line1" x1="10" y1="10" x2="50" y2="50" stroke="red"/>
  <line id="line2" x1="10" y1="10" x2="50" y2="50" stroke="red"/>
<svg>

<script>
  var line1=document.getElementById("line1");
  var line2=document.getElementById("line2");
  
  var x1=line1.getAttribute("x2")
  
  line2.setAttribute("x2", функция(координаты мышки, x1, другие переменные));
</script>

Maybe something easier? At least through object.property=...

Answer 1

_elm: function(sel){
     return this._cldElm(this.svg, sel);
},
_cldElm: function(elm, sel){
    return elm.querySelector(sel);
},
setAttr: function(el, ns, nm, vl){
     el.setAttributeNS(ns, nm, vl);
},
setAttrs: function(el, attrs){
     for (var a in attrs)
         this.setAttr(el, null, a, attrs[a]);
},
// и пример использования
var ln = this._elm('.svg-line');
this.setAttrs(ln, { x1: x - 50, y1: (rowId * 80) + 40, x2: x - 10, y2: y + 35 });

Answer 2

https://jsfiddle.net/lega911/2u9ucevz/

Answer 3

ractivejs