На самом деле для тех, кто может использовать препроцессоры в производстве, «вставляя» фоновый 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 tag ,, т.е.: $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 во всех ваших проектах, что круто.