У меня есть некоторые svgs на моем сайте, которые, кажется, нормально загружаются (даже модифицировали некоторые части с помощью внешнего css), и я хочу изменить некоторые из их css кода при событии mouseOver. Дело в том, что я не могу получить доступ к внутренним частям SVG из моего скрипта. Погиб последние 2 часа моей жизни, пытаясь проверить, решает ли jquery проблему или страница загружается правильно. Я прошел через тонну вопросов и ответов по теме на stackoverflow, но ничто, похоже, не решило мою проблему.
Это часть html, где у меня есть встроенный svg:
<div class="technology-used col-xs-2" id="html-technology-used">
<object class="technology-logo-container" id="html-logo-svg-container" type="image/svg+xml" data="props/html-logo.svg"></object>
</div>
<script>
var objectElem = document.getElementById("html-logo-svg-container");
objectElem.addEventListener("load", function () {
contentDoc = objectElem.contentDocument;
svg = contentDoc.documentElement;
console.log("svg = ",svg);
});
</script>
Сценарий, использованный здесь, был только для целей тестирования. Результат в консоли: TypeError: contentDo c равен нулю для Mozilla Developer Edition и Uncaught TypeError: Невозможно прочитать свойство documentElement из null в HTMLObjectElement. (индекс. html: 464) для Google Chrome. Кажется, странно работать с Microsoft Edge, если эта подсказка помогает вообще ... Я продолжал пробовать разные подходы, но, как я уже сказал, похоже, ничего не работает. Также SVG-файлы отображаются в Mozilla Inspector:
