Можно ли кастомизировать SVG который задан как фон?

Question

[Александр Флоринский]

Добрый день.
Есть вопрос
Например есть такой SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="22" width="22" class="radio" >
    <circle class="radio_circle" cx="11" cy="11" r="8" stroke-width="2" fill="none" />
    <circle class="radio_point" cx="11" cy="11" r="4" />
</svg>

Когда его вставляешь просто в код - то этой SVG можно управлять через стили
Например:

.radio_circle{
  stroke: $blue_light;
}
.radio_point{
  fill: $blue_light;
}

Но как только я вставляю этот SVG через CSS как фон

background: url("../i/radio.svg") no-repeat top left;

То все стили для SVG - отваливаются.
Можно ли, например, поменять параметр fill для SVG при наведении на него, вставленный через CSS ?

PS. Вопрос Закрыт.
Управлять через CSS не получилось((
Пришлось сделать хитрость.

label{
    position: relative;
    padding-left: 4px;
    cursor: pointer;
    background-size: contain;

    &:before{
      content: url("../i/input_style/radio.svg");
      opacity: 0;
    }
    &:after{
      content: url("../i/input_style/radio_select.svg");
      opacity: 1;
    }
  }

  input[type=radio]:checked + label{
    &:before{
      opacity: 1;
    }
    &:after{
      opacity: 0;
    }
  }

Answer 1

[Alex]

Напрямую так нельзя, но можно попробовать схитрить. В CSS для страницы:

.elem {
    background: url('/i/radio.svg');
}
.elem:hover {
    background: url('/i/radio.svg#hover'); /* Меняем URL картинки при наведении */
}

В SVG

<style>
#hover:target { /* Привязываемся к селектору :target, меняем свойство fill */
    fill: red;
}
</style>
<path id="hover" ... />

UPD: Хитрость не работает в вебкитах.

Comments

[Александр Флоринский]

Сделал почти так....
Но немного по другому. В вопросе написал свое решение.

[Alex]

Александр Флоринский, в вашем решении можно убрать ::after и просто менять фон у ::before.

[Александр Флоринский]

Можно, но не очень хорошо получится.
в момент подгрузки нового SVG будет задержка, и получится что картинки будет мигать. На локальной машине это не видно, но если загрузить код на хостинг - то моргание достаточно заметное.

В моем решении подгружаются сразу 2 SVG и при необходимости одна заменяет другую.

[Alex]

Александр Флоринский, можно инлайнить SVG прямо в CSS через data-uri.

[Александр Флоринский]

и можно будет его кастомизировать???
я вставлял через background: url("../i/radio.svg") no-repeat top left; - сразу же отваливаются CSS правила для SVG.

[Alex]

Александр Флоринский, что подразумеваете под кастомизировать? Менять фон на лету не получится, а вот две картинки вставить (как в вашем примере) — запросто. Устанавливать background-repeat и background-position тоже будет можно. Всё как с обычными картинками, просто не надо делать ещё запросы за ними — они уже в CSS.

[Александр Флоринский]

Я попробую, спасибо.
но для меня идеальный вариант, это вариант со сменой фона.
У меня есть несколько цветовых схем и 2 состояния SVG.
И хотелось бы управлять цветом из цсс, не подгружая другие SVG.
Вставить SVG через тег в html - не подходит(

[Alex]

Александр Флоринский, но в вашем примере вы загружаете две картинки. Сейчас нет способа управлять цветом SVG через CSS, если он не заинлайнен.

Answer 2

[GreatRash]

Попробуйте fill="currentColor" в SVG, а затем рулите рулите цветом для родителя.

Comments

[Александр Флоринский]

попробую ваш вариант, может будет лучше чем я придумал.
спасибо.