2

На HTML - странице присутствует векторное изображение в формате .SVG. Подгружено при помощи тэга object:

<object id="somesvg" type="image/svg+xml" data="somepath" id='object'></object>

Разметка SVG-шки содержит определение стиля заливки:

...
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:none}
    .fil1 {fill:black}
   ]]>
  </style>
 </defs>
 ...

Пытаюсь при помощи JS реализовать изменение заливки этого изображения. Несколько разноцветных блоков, при клике на каждый из которых должен меняться цвет изображения на цвет фона этого блока:

<script>
$(".color_change").click( function() {
	var color = $(this).css('background-color');	
	var object = document.getElementById("somesvg");
  var svgDocument = object.contentDocument;
  var svgb = svgDocument.getElementsByClassName("fil1");
  svgb1[0].setAttribute("fill", color);
		});
</script>

Скрипт успешно добавляет свойство fill к элементу класса .fil1, что видно в консоли, однако заливка SVG - изображения на странице остается неизменной. В чем моя ошибка?

P.S. Менять разметку .SVG-файла нельзя, таких файлов довольно большое количество.

4
  • Элементы класса .fil1 - "<path>".
    – user281210
    25 янв 2018 в 8:54
  • попробуйте воспользоваться important
    – webDev_
    25 янв 2018 в 9:13
  • Вроде стили и атрибуты это разные вещи
    – DiDex
    25 янв 2018 в 9:18
  • Спасибо! Помогла вот такая конструкция : $(svgb1[0]).attr('style','fill:'+color);
    – user281210
    25 янв 2018 в 9:24

1 ответ 1

1

Необходимо задавать элементу не атрибут fill, а style! Вместо строки:

svgb1[0].setAttribute("fill", color);

стоит использовать другую конструкцию:

$(svgb1[0]).attr('style','fill:'+color);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.