Управление SVG по его id

265

18 мая 2018, 06:50

Имеется простое веб-приложение на котором по нажатию на "Насос1" или "Насос2" будет меняться цвета насосов (с красного на зеленый) ,сам рисунок SVG формата . Как это можно сделать с помощью скриптов ?

<div id="sidebar">
    <ul>
        <a><input type="button" class="pum" value="Насос1" onClick="myFunction"></a>
        <a><input type="button" class="pum1" value="Насос2" onClick="myFunction"></a>

И ИМЕЕТСЯ ID SVG этого вектора.

<g
   id="pump-1"
   inkscape:label="#g1267"
   transform="matrix(0.81036317,0,0,0.81036317,51.74355,-26.659243)">
  <circle
     r="14.303132"
     cy="225.50253"
     cx="-28.786152"
     id="path1216"
     style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

ВОТ КОД ВЫПОЛНЕНИЯ

var pump-1Click = document.getElementById("pump-1").addEventListener("click", changeColor); var clicks = 0; function changeColor(pump-1){ if (pump-1.style.fill == "rgb(248, 0, 0)") { pump-1.style.fill = "rgb(20, 255, 0)"; } else { pump-1.style.fill = "rgb(29, 172, 249)"; } }

Answer 1

Для чтения и присвоения атрибута элемента, можно использовать методы getAttribute и setAttribute, соответственно.
Это самый очевидный способ, хотя не очень "правильный".

let circles = document.querySelectorAll('#demo circle[id^="pump-"]');  
for (let circle of circles) 
  circle.addEventListener('click', toggleFillColor);  
 
function toggleFillColor() { 
  let newFillColor = this.getAttribute('fill') === '#0f0' ? '#f00' : '#0f0';  
  this.setAttribute('fill', newFillColor);  
}

<svg id="demo" width="400" height="150"> 
  <circle id="pump-1" cx="100" cy="75" r="50" fill="#f00" stroke="#000" stroke-width="4"/> 
  <circle id="pump-2" cx="300" cy="75" r="50" fill="#0f0" stroke="#000" stroke-width="4"/> 
</svg>

С атрибутами SVG в XML, нужно работать через варианты методов, понимающие пространства имен: getAttributeNS и setAttributeNS. Методами без "NS" допустимо пользоваться в HTML. На практике, этим различием часто пренебрегают (пока не сталкиваются с ошибками).
Таким образом, надо учитывать специфику неймспейсов... и способ с атрибутами на самом деле может оказаться намного сложнее, чем кажется поначалу.

Другой вариант - изменение стилей: через свойство элемента style, или назначением/удалением класса.
Имхо, работа через классы - наиболее удобный и безопасный путь:

let circles = document.querySelectorAll('#demo circle[id^="pump-"]');  
for (let circle of circles) 
  circle.addEventListener('click', toggleFillColor);  
 
function toggleFillColor() { 
  this.classList.toggle('u--enabled');   
}

.u--enabled { fill: #0f0; }

<svg id="demo" width="400" height="150"> 
  <circle id="pump-1" cx="100" cy="75" r="50" fill="#f00" stroke="#000" stroke-width="4"/> 
  <circle id="pump-2" class="u--enabled" cx="300" cy="75" r="50" fill="#f00" stroke="#000" stroke-width="4"/> 
</svg>

Когда SVG-элемент содержится в HTML, на него действуют стили классов и во внешних CSS-файлах, и в тегах <style> (то есть, все как обычно).