Как поменять заливку SVG по нажатию на button

217

20 мая 2018, 12:50

Написал маленький скрипт чтоб по нажатию на BUTTON менялась заливка насоса в формате SVG но почему-то не работает (( Что не так ?

КОД HTML:

<a><button type="button" class="pum" value="Насос1" onClick="doIt(1)">Насос1</button></a>

КОД JS:

var path1216Click=document.getElementById("path1216");   
function doIt(1) {
    if (path1216.style.fill == "#0aff00") {
        path1216.style.fill = "#ff0000";
    }
    else {
        path1216.style.fill = "#1400ff";
    }
}

КОД SVG. id="path1216":

<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:#0aff00;fill-opacity:1;stroke:#000000;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

Answer 1

var counter = 1; 
var path1216Click = document.getElementById("path1216"); 
 
var doIt = function() { 
  if (counter == 1) { 
    path1216.style.fill = "#ff0000"; 
    counter++; 
  } else if (counter == 2) { 
    path1216.style.fill = "#1400ff"; 
    counter++; 
  } else if (counter == 3) { 
    path1216.style.fill = "#0aff00"; 
    counter = 1; 
  } 
}

<a><button type="button" class="pum" value="Насос1" onClick="doIt()">Насос1</button></a> 
<svg width="300" heigth="300" viewBox="0 0 180 180"> 
<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:#0aff00;fill-opacity:1;stroke:#000000;stroke-width:2.4000001;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> 
           </g></svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Асинхронный UI в AspNetCore

View:

221

javascript

Добавление переносов в строке в JS

Есть JQ код, читаю содержимое textarea, и вывожу его в определенный DIVПроблема в том, что в textarea я могу написать тест с переносами строк, и даже в консоль...

184

javascript