- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试实现一个跨浏览器的 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;
}
最佳答案
浏览器支持 SVG 作为背景图像。 mixin 需要对某些字符进行 url 编码以创建“URL 安全”数据。你正在将你的颜色传递给这个 mixin 但要小心字符 #
并将其替换为 url 编码版本 %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;
}
I am using the information given in the question's link
关于css - SVG 作为 MIXIN 中的背景图像,通过 SASS 变量设置颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43896368/
乐 mixins具有两个(或更多)性质,在同一个容器中组合多个值,或者值与角色一起。但是,据我所知,没有一种直接的方法可以检查不是由您创建的变量中的“混合性”。 这可能是个伎俩 my $foo = 3
我对 sass 比较陌生,但是当我学习它时,Sass 网站说要开始使用 @use 而不是 import,所以经过大量的反复试验,我终于弄清楚了如何使用它与导入相同。 注意:我使用 Prepros 进行
给定一个看起来像这样的代码片段,我如何编写一个函数来检查给定对象是否实现了某个混合?我尝试使用指针转换,但由于它们具有相同的基础,因此每个结果都是非空的,但我猜测有一个模板化的解决方案,但找不到我可以
我正在使用 Typescript 2.2 的 mixin,并且想使用另一个 mixin 的属性。 文档显示可以将 mixins 限制为仅混合到某些类中...... const WithLocation
我如何创建一个将嵌套的 mixin 属性用作参数的 mixin? 我用下一个例子来解释自己。 我有一个“过渡属性”mixin: .transition-property (@props){ -we
我浏览了language documentation而且 Google Dart 似乎不支持 mixins(接口(interface)中没有方法主体,没有多重继承,没有类似 Ruby 的模块)。我对此
我想编写返回混合的函数/混合。例如我有这个 mixin: @mixin generate-offsets-from-map($class-slug,$type,$from, $to, $step) {
所有 Less 文档和教程都使用 #namespace > .mixin()当它进入命名空间时的语法。但是我发现自己更习惯于 .namespace.mixin()语法,即: .namespace()
我正在努力实现以下目标: class A { def foo() { "foo" } } class B { def bar() { "bar" } } A.mixin B def a = n
出于本问题的目的,将“mixin”视为 https://www.typescriptlang.org/docs/handbook/mixins.html 中所述的函数。 .在这种情况下,mixin 扩
如何在 vue mixins 中组合两个函数? Vue.mixin({ methods: { functionOne: () => { console.log(1)
我需要重写 mixin 添加的一些成员函数来自第三方库。问题是:mixin 立即在多个第 3 方类定义中使用,在定义 mixin 的同一个脚本文件中。我只能在此脚本之前或之后插入自定义代码,而不能在两
我有一些基本的 mixin,它们使用媒体查询应用一些规则 .on-small(@rules) { @media (@minWidthSmall) { @rules(); } } .on-mediu
我尝试安装 npm 包。所有软件包都安装正确。 但是当我尝试使用 npm start 运行应用程序时当时发生以下错误: ERROR in ./node_modules/css-loader?{"sou
这里有两个mixin @mixin parent { .parent & { @content; } } @mixin child($child) { .#{$child} & {
我在另一个 mixins 中有一个 mixins .background(@url: @base-url , @repeat: repeat, @pos1: left, @pos2: center
我有这个: 如您所见,我目前有一个包含按钮样式混合宏的条件,无论如何我可以自动包含一个吗?例如: @mixin button($color) @include button-#{$color} 最
我有以下代码,可以很好地将各种 std::tuples 转发到我的“BaseSensor”主机类的各种 mixin。 #include // std::cout std::endl #include
我按照概述的方式组织我的 sass (scss) 文件 here ... stylesheets/ | |-- modules/ # Common modules | |
所以,这是我的第一个 mixin .3transitions (@value1,@value2,@value3,@duration){ @value: ~"@{value1},@{value2}
我是一名优秀的程序员,十分优秀!