На 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-файла нельзя, таких файлов довольно большое количество.
important