В статье рассказывается про изменение атрибутов графических примитивов во время исполнения. На примере изменения координатов графического элемента (тележки выключателя).
Для этого нам понадобится изображение фидера, включенного и отключенного выключателя.
За положение тележки отвечает переменная telega. За состояние выключателя переменная V_10.
Привяжем включенное и отключенное изображение выключателя к переменной V_10.
Выключатель имеет следующий код (скопировано из редактора):
<g style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(0 0)" >
<path d="m 126.62078 245.24079 l 0 7.88433" style="stroke: rgb(102,0,204); stroke-width: 0.51938933; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 4; fill: none; fill-rule: nonzero; opacity: 1;" transform=" matrix(1.91 0 0 1.89 -230.88170661014982 -462.4156744418498) " stroke-linecap="round" />
И ещё много разных линий …..
</g>
Видим, что элементы линии сгруппированы и у группы нет свойств х и у, манипулируя которыми мы бы могли перемещать тележку по экрану. Но есть свойство transform, которое отвечает за смещение по осям x и y, а также растягивание.
Почему же мы видим, что смещение translate(0 0) равно нулю, а элемент находится где-то посередине экрана? Это особенность редактора. Чтобы узнать настоящее смещение нужно сохранить схему, проект, заново открыть схему в браузере, открыть исходный код страницы (комбинация клавиш ctrl+U), найти элемент с id V_10_on и V_10_off.
Видим, что у них transform="translate(270.5 293.5)". 270.5 – смещение по оси х, 293.5 - смещение по оси y.
Выкаченная тележка должна находиться немного правее втычных контактов, значит манипулировать будем только положением по оси х.
Итоговое выражение получилось такое:
"translate("+(data.val.telega*20+270.5)+" 293.5)"
Всю строку берем в кавычки, т.к. в JavaScript transform имеет строковый тип. data.val.telega*20 – если состояние тележки равно 1, то она выкачена, смещаем её вправо на 20 пикселей.
(data.val.telega*20+270.5) – заключаем число в скобки, чтобы интерпретатор JavaScript браузера понял, что это число.
(data.val.telega*20+270.5)+" 293.5)" – получается уже строковое представление трансформации.
Получилось вот так:
