Не срабатывает setAttribute с svg

213

02 июня 2017, 14:34

Добрый день суть в названии вопроса. Есть страничка на которую в div добавляется svg изображение через тег < object >

<div class='svg_cont' > 
<object id='svgo' type='image/svg+xml' data='pic.svg'></object> 
</div> 
<input type="button" id="show" class="show_c" value="show">

Собственно сам div svg_cont имеет display:none;

В pic.svg примерно такое:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id='scene' xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="638px" height="638px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
viewBox="0 0 638 638" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 87.199 87.2"> 
  <path class="fil0 str0" d="M348 28c-9,-1 -19,-2 -28,-2l0 13c9,0 18,0 27,1l1 -12z"/> 
  <path class="fil0 str0" d="M377 32c-10,-2 -19,-3 -29,-4l-1 12c9,1 18,2 27,4l3 -12z"/> 
  ... 
и много много тегов path 
  </svg>

Пытаюсь задать атрибуты так:

var a1 = '1'; //Эти переменные изначально даны, в соответствии с ними и должно менятья 
var a2 = '0'; 
var svg = document.getElementById("svgo"); 
var svdom = svg.contentDocument; 
var path = svdom.getElementsByTagName("path"); 
if(a1=='1'){path[0].setAttribute('fill', 'yellow');}  
if(a2=='1'){path[1].setAttribute('fill', 'yellow');}

Суть задания, при клике на кнопку "Показать" отобразить div изменив необходимые атрибуты fill у нужных path на другой цвет(к примеру желтый, изначально черный)

по нажатию на кнопку происходит обычное действие

$('#show').click(function(){ 
  $('.svg_cont').show(); 
});

форма открывается, но параметр не задается. Почему? Если форма изначально отображается, то параметр fill спокойно меняется. В дебагере ошибка - Uncaught TypeError: Cannot read property 'setAttribute' of undefined Но при этом повторение действий в консоли все отлично выполняет. Подскажите с чем может быть проблема?

Answer 1

Очевидно, браузер не хочет загружать то, что впринципе не используется на странице (display:none;). Вы можете попробовать: