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 that you have read and understand our privacy policy and code of conduct.

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