Как проще через JS менять атрибуты элемента SVG?

Question

[Андрей Ильинский]

Всем здравствуйте! Хочу менять координаты x2, y2 элемента line на значения некоторой функции от координат мышки и координат других элементов SVG. Пишу скрипт на JS. Работаю через getAttribute, setAttribute примерно так:

<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>

Может можно как то проще? Хотя бы через объект.свойство=...

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 });

Comments

[Андрей Ильинский]

Это как раз обертки из второго ответа? Я пока мало понял, но разберусь..

[Петр]

Андрей Ильинский: Это из моих проектов.

Answer 2

[lega]

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

Comments

[lega]

или так (немного js) https://jsfiddle.net/lega911/3admy0t4/

[Андрей Ильинский]

lega: А что означает двоеточие перед координатой в line?

[lega]

Андрей Ильинский: Чтобы значение бралось из переменной.

Answer 3

[ddd329]

ractivejs