Как управлять svg в теге object из js?

Question

[Кристина]

Столкнулась с проблемой, когда начала собирать всё в webpack. Разметка создаётся динамически, один js файл.

До этого была сверстанная страница и отдельный js файл, который подключала в svg. Теперь один файл и два разных документа.

Все варианты перепробовала, не получается.

svg(){

		let object = document.querySelector('object');
		let objectDoc = object.contentWindow.document;

		return console.log(objectDoc);//null

	}

Answer 1

[Антон Шаманов]

Когда вы работаете с внешним JS (то есть не встроенным в файл SVG), если у вас встроенные SVG, вы можете выбрать его как любой другой DOM-элемент. Если вы используете вы можете выбрать его через contentDocument.

window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};

Comments

[Кристина]

Вот всё время упираюсь в то, что документ не загружен ещё... Надо на лбу у себя написать. Спасибо огромное!

[Антон Шаманов]

Кристина, переходите на jquery и будет вам "щасте"
p.s. обертка

$(function () {
  // ...
});

гарантирует выполнение кода после загрузки документа.

[Владимир Проскурин]

Антон Шаманов, зачем jQuery, когда есть аналог?

document.addEventListener('DOMContentLoaded', function () {
    // ...
}, false);

[Антон Шаманов]

Владимир Проскурин, зачем нужен js когда есть ассемблер? :)

[Владимир Проскурин]

Антон Шаманов, неправильная аналогия. Если человек спокойно пользуется нативными штуками, зачем ему подключать jQuery ради $() ? Другое дело, что на ассемблере такой же функционал как и на js будет писать в разы дольше и сложнее. Тут же, разве что больше символов вводить.

[Кристина]

Антон Шаманов, Так хорошо начинали, а тут бах и в JQ вас занесло))) Если без шуток, то к JQ только под дулом от пистолета обращусь (шутка), вообще не прёт!)

[Владимир Голубь]

Антон Шаманов,

почему то у меня это не работает ?

<object id="SVG" data="cdn link" type="image/svg+xml"></object>

    <script>
    window.onload=function() {
        var object = document.getElementById("SVG");
        var svgDocument = object.contentDocument;

        console.log(svgDocument);
        // var svgb1 = svgDocument.getElementsByClassName("firstb");
        // var svgb2 = svgDocument.getElementsByClassName("secondb");
        // svgb1[0].setAttribute("fill", "yellow");
        // svgb2[0].setAttribute("fill", "red");
    };

    </script>

[Антон Шаманов]

Владимир Голубь, насчет object не знаю, а svg работает норм и кстати атрибута data не существует