SVG 作为 MIXIN 中的背景图像通过 SASS 变量设置颜色

Posted 2023-03-06

【中文标题】SVG 作为 MIXIN 中的背景图像通过 SASS 变量设置颜色

【英文标题】：SVG as a background-image in MIXIN setting color via a SASS variable

【发布时间】：2017-10-09 07:58:05

【问题描述】：

我正在尝试实现一个跨浏览器的 CSS 背景图像 SVG。在 mixin 中，我可以通过调用 mixin 来动态使用不同颜色的 SVG。

我有以下示例，我在此页面http://codepen.io/tigt/post/optimizing-svgs-in-data-uris 上运行了优化器，我试图用它来证明这个想法。但是虽然它适用于 Chrome 和 Edge，但我不知道如何让它在 FF 或 IE11 中运行。提供回退是很棘手的，因为我需要使用很多不同的颜色。

@mixin spinner($color) 
background-image: url("data:image/svg+xml,%3Csvg style='fill:" + $color + ";' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' class='uil-gears'%3E%3Crect x='0' y='0' width='100' height='100' fill='none' class='bk'%3E%3C/rect%3E%3Cg transform='translate(-20,-20)'%3E%3Cpath d='M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='90 50 50' to='0 50 50' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(20,20) rotate(15 50 50)'%3E%3Cpath d='M79.9,52.6C80,51.8,80,50.9,80,50s0-1.8-0.1-2.6l-5.1-0.4c-0.3-2.4-0.9-4.6-1.8-6.7l4.2-2.9c-0.7-1.6-1.6-3.1-2.6-4.5 L70,35c-1.4-1.9-3.1-3.5-4.9-4.9l2.2-4.6c-1.4-1-2.9-1.9-4.5-2.6L59.8,27c-2.1-0.9-4.4-1.5-6.7-1.8l-0.4-5.1C51.8,20,50.9,20,50,20 s-1.8,0-2.6,0.1l-0.4,5.1c-2.4,0.3-4.6,0.9-6.7,1.8l-2.9-4.1c-1.6,0.7-3.1,1.6-4.5,2.6l2.1,4.6c-1.9,1.4-3.5,3.1-5,4.9l-4.5-2.1 c-1,1.4-1.9,2.9-2.6,4.5l4.1,2.9c-0.9,2.1-1.5,4.4-1.8,6.8l-5,0.4C20,48.2,20,49.1,20,50s0,1.8,0.1,2.6l5,0.4 c0.3,2.4,0.9,4.7,1.8,6.8l-4.1,2.9c0.7,1.6,1.6,3.1,2.6,4.5l4.5-2.1c1.4,1.9,3.1,3.5,5,4.9l-2.1,4.6c1.4,1,2.9,1.9,4.5,2.6l2.9-4.1 c2.1,0.9,4.4,1.5,6.7,1.8l0.4,5.1C48.2,80,49.1,80,50,80s1.8,0,2.6-0.1l0.4-5.1c2.3-0.3,4.6-0.9,6.7-1.8l2.9,4.2 c1.6-0.7,3.1-1.6,4.5-2.6L65,69.9c1.9-1.4,3.5-3,4.9-4.9l4.6,2.2c1-1.4,1.9-2.9,2.6-4.5L73,59.8c0.9-2.1,1.5-4.4,1.8-6.7L79.9,52.6 z M50,65c-8.3,0-15-6.7-15-15c0-8.3,6.7-15,15-15s15,6.7,15,15C65,58.3,58.3,65,50,65z'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='90 50 50' dur='1s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;

【问题讨论】：

$color 是否在 URL 中添加了 # 字符。如果是这样，则您正在创建一个无效的 URL。

【参考方案1】：

浏览器支持将 SVG 作为背景图像。您正在寻找的网络很好地解释了如何将字符替换为“URL 安全”数据。您正在将颜色传递给此 mixin，但请注意 # 并将其替换为 %23。

@function str-replace($string, $search, $replace: '') 
    $index: str-index($string, $search); 
    @return if($index, 
        str-slice($string, 1, $index - 1) + $replace + 
        str-replace(str-slice($string, $index + 
        str-length($search)), $search, $replace), 
        $string); 
         

@function hexToUrl($color) 
  $newcolor: str-replace($color, '#', '%23');
  @return $newcolor;

@mixin color($color) 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#hexToUrl($color)'%3E%3C/svg%3E");
  background-repeat: no-repeat;


.class
  @include color('#000');

这个输出：

.class 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000'%3E%3C/svg%3E");
  background-repeat: no-repeat;

我正在使用问题link中提供的信息

【讨论】：

出于某种原因，我从未想过需要对十六进制中的 # 进行编码！

这确实有帮助，我在 FF 和 IE11 中看到了 svg，但它不像在 Chrome 和 Edge 中那样具有动画效果。

SVG 动画效果不同。这取决于您制作动画的内容，但我应该使用 GSAP 之类的库来避免浏览器问题。