Блог

есть много похожих вопросов, я прочитал все, и это не помогло. Пожалуйста, помогите. У меня есть пример в codepen.

У меня есть встроенный svg в html. У меня есть кнопка, которая должна изменять цвет путей.

В javascript я пытаюсь что-то вроде:

 let gar1=document.getElementById("gar1");

function changeColor() {
  console.log(gar1);
  gar1.setAttribute('style', 'fill: green');
  gar1.style.fill = "yellow";
  }
  

Оба gar1.setAttribute('style', 'fill: green'); и gar1.style.fill = "yellow"; являются правильными.

Проблема в вашем codepen заключается в том, что вы выбираете <g> элемент вместо пути. Чтобы изменить цвет круга, вам нужно будет выбрать первый путь (тот cls-1 , в котором указан класс).

Ваш svg:

 <svg width="150" id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 367.45 382.12">
  <defs>
    <style>
      .cls-1 {
        fill: #e73834;
      }

      .cls-2 {
        fill: #010101;
      }
    </style>
  </defs>
  <g id="gar1">
    <path class="cls-1" d="M283.5,36.66c-71.83,0-131.28,42-162.17,106.88-47,98.67,10.26,233.63,115.05,264.7S464.73,353,467.89,243.76,421,36.66,283.5,36.66Z" transform="translate(-102.66 -34.59)"></path>
    <path class="cls-2" d="M283.5,34.59a173.73,173.73,0,0,0-115.81,43.5,195.8,195.8,0,0,0-40.13,49.19,180.83,180.83,0,0,0-21.28,55.17,191.34,191.34,0,0,0-2.63,56.61,213.84,213.84,0,0,0,41,105.62,191.81,191.81,0,0,0,39.91,39.9A166.94,166.94,0,0,0,234.92,410a161.68,161.68,0,0,0,58.15,6.34,187.18,187.18,0,0,0,57.26-13.51,206.33,206.33,0,0,0,51-29.91,196.11,196.11,0,0,0,39.92-43,168.93,168.93,0,0,0,24-52.72c4.78-18.73,5.4-38,4.54-57.22a268.45,268.45,0,0,0-7.46-52.92,200.55,200.55,0,0,0-18.12-47.33,159.72,159.72,0,0,0-29.78-39.2A153.76,153.76,0,0,0,372,52a194,194,0,0,0-56.29-15.42,261.08,261.08,0,0,0-32.23-1.95c-2.66,0-2.67,4.14,0,4.14,20.85,0,41.74,2.25,61.85,7.9a162.78,162.78,0,0,1,47.72,21.9A147.62,147.62,0,0,1,428,102.07a172.82,172.82,0,0,1,23,42.6,230.5,230.5,0,0,1,12.29,49.57,277.89,277.89,0,0,1,2.28,53.93,152.67,152.67,0,0,1-14,55,179.41,179.41,0,0,1-32,47.13,200.43,200.43,0,0,1-45.28,36.1,195.14,195.14,0,0,1-53.64,21.55,169.64,169.64,0,0,1-56.89,3.73,155.29,155.29,0,0,1-54.11-16.3,174.51,174.51,0,0,1-44.18-32.6A199.36,199.36,0,0,1,132.42,318a211.53,211.53,0,0,1-20-52.1A199.44,199.44,0,0,1,107,210.43a174.93,174.93,0,0,1,11.12-54.16,193,193,0,0,1,31.34-53.41,179.6,179.6,0,0,1,46.21-40.09,168.81,168.81,0,0,1,57-21.35,176.66,176.66,0,0,1,30.8-2.69C286.17,38.73,286.17,34.59,283.5,34.59Z" transform="translate(-102.66 -34.59)"></path>
  </g>
</svg>
  

Вы добавляете style=»fill:yellow» к <g id="gar1"> элементу, родительскому тегу <path> элементов.

Этот стиль не применяется к элементам пути, потому что элементы пути имеют classname (cls-1 и cls-2), который имеет стиль для атрибута fill .

Решение:

Я бы рекомендовал удалить элемент <defs><style>...</style></defs> внутри svg и добавить имя класса в сам элемент svg, чтобы переопределить стиль <path> элементов.

Второй шаг — добавить класс (активный) к элементу svg, когда мы нажимаем на кнопку, которая выполняет функцию changeColor() .

HTML:

 <svg class="circle" ...>...</svg>
  

CSS:

 /* circle background path */
.circle g path.cls-1 {
  fill: red;
}

.circle.active g path.cls-1 {
  fill: green;
}

/* circle border path*/
.circle g path.cls-2 {
  fill: black;
}

.circle.active g path.cls-2 {
  fill: green;
}
  

Javascript:

 const svg = document.getElementById("svg");

function changeColor() {
  console.log(svg );
  svg.classList.add('active');
}