Хотите изменить цвета SVG, загруженного с помощью <object>

Question

Итак, я загружаю SVG следующим образом:

<object type="image/svg+xml" data="/assets/pro.svg"></object>

и в браузере это выглядит так:

Так что теперь я хочу изменить цвет заливки cls-1 и cls-2. Я попытался изменить цвет класса .cls-2 и .cls-1, используя тег style, и попытался использовать Js и Jquery, чтобы добавить его после загрузки. оба эти способа не работали, казалось, что эти классы не распознаются.

Так возможно ли это? Я не против попробовать другой способ загрузки SVG img, просто это единственный способ, который позволил мне свободно изменять его размер, как будет видно (и, мы надеемся, манипулировать) цветом каждой части, сохраняя при этом маленький кусочек кода.

Answer 1

Вам нужно добавить специальное объявление таблицы стилей внутри SVG, непосредственно перед открывающим тегом SVG.Он похож, но не идентичен элементу HTML link.Примерно так:

<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="320"
     height="240"
     viewBox="0 0 320 240">
    <rect id="r" class="foo" x="10" y="10" width="300" height="200"/>
</svg>

Если в файле css есть правила для класса foo, они будут применены к rect.

Это должно работать с <object> так, как вы упоминаете.Нет необходимости загружать тот же файл CSS в HTML.

Чтобы изменить внешний вид во время выполнения, вы должны иметь доступ к элементам SVG.

Pure js:

var r = document.querySelector("#r");
r.classList.remove("foo");
r.classList.add("bar");

Просто помните, что Свойства CSS для SVG не такие, как для HTML.