Укажите 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
Это возможно?
2 ответа
Нет, это невозможно. SVG должен быть подготовлен в одном документе (это может быть URI данных или файл с внешней ссылкой), а затем затем использоваться в качестве фона в другом файле.
Для тех, кто может использовать препроцессоры в производстве, на самом деле возможно «встроить» фон 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 во всех ваших проектах, что круто.