1

Добрый день суть в названии вопроса. Есть страничка на которую в 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 Но при этом повторение действий в консоли все отлично выполняет. Подскажите с чем может быть проблема?

1 ответ 1

0

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

  1. использовать visibility: hidden вместо display: none

  2. сместить за экран position:absolute; left:-1000px вместо display: none

  3. править контент уже после открытия и подгрузки файла.

3
  • первое не вариант, так как hidden просто не отображает а след собственно остается. Над вторым надо подумать - будет ли это хорошим решением ? вот третье интересно, но я так уже пробовал. По факту на момент загрузки страницы файл уже подгружен. но просто не отображается. Но даже если я пропишу команду изменения в событие при клике. Ничего не измениться. Почему так? Я не понимаю.
    – Kamupo
    1 июн 2017 в 22:54
  • Кажется я понял в чем проблема, но от этого мне не стало лучше :( Походу вся проблема заключается в svg, а если быть точнее в object как оказалось(не знаю почему я раньше на это не обращал внимание) что при display:none; не грузится изображение(по факту там только элемент object без вложения) и по факту оно догружается на момент клика. Потому то (скорее всего) pathна тот момент еще не определен.
    – Kamupo
    2 июн 2017 в 3:53
  • @Kamupo Я примерно это и пытался вам сказать
    – Crantisz
    3 июн 2017 в 18:04

Ваш ответ

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

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