Изменить цвет на SVG ID

Question

Я сделал SVG-изображение кота в иллюстраторе. Я назвал свои слои, поэтому у меня есть кошачьи глаза, названные "глазами".

Когда я импортирую SVG в окно разработчика, я вижу, что имя слоя там

<g id="eyes">
  <path class="cls-1" d="M.25,766.38c2.52,9,16.26,23.83,35.15,39.06s3
  ...

Теперь через javascript я бы хотел изменить цвет на глаза. Как мне это сделать? Я проводил исследования в течение нескольких дней, не находя ответа.

HTML:

<object id="bild" data="a.svg" type="image/svg+xml"></object>

JS:

var catImage = document.getElementById( 'bild');
catImage.layerName.style="fill:red";

Я знаю, что это везде неправильно, но ... я что-то понимаюкак это?

Answer 1

SVG, импортированный внутри тега <object> или <img>, не может быть напрямую стилизован css или javascript страницы хоста.

Однако для <object> вы можете получить такой доступ черезсвойство contentDocument элемента object.

В вашем случае это будет ...

let cat = document.getElementById('bild').contentDocument;

Но свойство contentDocument будет недоступно до тех пор, пока страница не будет полностью загружена и обработана. Итак, вам нужно будет поместить свой код в обработчик событий при загрузке.

Что, в вашем случае, было бы ...

window.addEventListener("load", function() {
  let cat = document.getElementById('bild').contentDocument;
  let eyes = cat.getElementById('eyes');
  eyes.style.fill="red";
});

Answer 2

Вы можете добавить некоторые стили внутри вашего SVG

.layerclass{
    fill:red;
}

Это свойство fill меняет цвет SVG.