Замечательный вопрос! Мне не удалось применить стили указанные в отдельном css файле к подключенному в страницу svg. Если это поможет, то вот как я делал. Код выдергивал из проекта, чтобы была понятна суть, возможно простым копированием не заработает, но смысл примерно такой:
<body>
<object id="map-svg" type="image/svg+xml" data="map.svg"></object>
</body>
var map = document.getElementById("map-svg");
var mapDoc = map.contentDocument;
var element = mapDoc.getElementById("barrel-1");
// так не заработало
// element.setAttributeNS(null, "style", "fill:#008000");
Тогда я сделал так, в svg указал таблицу стилей:
<defs>
<style type="text/css">
.wpc-active {
fill: #008000;
}
</style>
</defs>
И в скрипте добавил код:
element.classList.add('wpc-active');
//element.classList.remove('wpc-active');
Простой
Простой
