Укажите SVG в качестве фонового изображения, а ТАКЖЕ настройте SVG в CSS?

Можно ли указать SVG в качестве фонового изображения, а ТАКЖЕ стиль SVG в том же файле CSS?

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

В псевдо CSS я хотел бы сделать следующее, чтобы изменить цвет простой формы на основе класса родительского элемента:

element1 {
 background-image(icon.svg);
}

element1.black .svg-pathclass {
 fill: #000000;
}

element1.white .svg-pathclass {
 fill: #ffffff;
}

очевидно, это предполагает путь в SVG, имеющий класс .svg-pathclass

Это возможно?

Ответ 1

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

Ответ 2

Вы можете использовать маски SVG и CSS для воссоздания этого эффекта, а затем использовать обычный CSS для стиля внутри SVG, даже background-image

-webkit-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -o-mask:    url(filename.svg) 50% 50% / 100px 50px no-repeat;
    -ms-mask:   url(filename.svg) 50% 50% / 100px 50px no-repeat;

background-color: red;
background-image: url(animated.gif);

/* Filename, Position / Size, Repeat */
/* Modernizr.cssmask is the test needed to pass - snippet below */

Вы можете использовать это, чтобы создать тени для теней, добавив element к DOM и стилю, которые с более низким индексом z и установкой непрозрачности.

Надеюсь, что это поможет!

Изменить: Ссылки

Тест Modernizr - http://pastebin.com/w4eVbEKr
Дополнительная информация - https://www.webkit.org/blog/181/css-masks/

Ответ 3

Фактически это возможно для тех, кто может использовать препроцессоры в производстве, путем "inlining" background SVG и бит SASS mixins, которые "разрезают" целую svg тарабарщину, чтобы получить доступ к частям, с которыми вы хотите манипулировать через SASS variables.

В исходном сценарии у вас есть элемент
<div class="element1"></div>,

поэтому вам понадобится mixin/function, который будет содержать SVG для вас. Скажем, вы хотите управлять fill, поэтому:

@mixin inline-svg($color, $svg-content) {
  $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
  $end:   '</svg>';

  background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}

где $svg-content переменная - это ваш элемент <svg>, исключающий элемент <style> (который вы хотите получить изнутри mixin) и обертывающий тег svg, т.е. $svg-content = "<path .... />"

Это просто нужно включить со значениями, переданными внутри:
@include inline-svg(salmon, $svg-content);

Чтобы суммировать все это, это пример SASS:

$svg-content = "<path .... />"

@mixin inline-svg($color, $svg-content) {
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>';
    $end:   '</svg>';

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}');
}  

.element1 {
    @include inline-svg(rgba(0,0,0,0.6), $svg-content);
}

Я думаю, что возможности здесь довольно большие (для этого подхода также существуют ограничения). Фактически я передаю SASS map в мой mixin с css стилями, определенными как пара key, value, чтобы вставить целую кучу стилей css в <style> часть svg.

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