Css 如何在较少的时间内使用SVG

我正在尝试使用内联SVG（内联对于这个项目非常重要，因为它需要在单个css文件中易于移植），我决定少用。我找到了这一页，它讲述了一种实现这一点的方法。然而，我似乎无法让这个工作。我使用的PHPStorm的编译器插件更少，它抛出了一个语法错误

3:13:14 PM LESS CSS Compiler Error: filters.less: Syntax Error: JavaScript evaluation error: `(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c127&&d>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m>2;i=(c&3)>4;j=(f&15)>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('url(data:image/svg+xml;base64,','#grayscale',')')` (line 30, column 2) near
.blurToClear {
  .blur();
} (show balloon)

以下是我的CSS：

.blur (@level: 3px) {
  @svg: ~"<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='@level' /></filter></svg>#grayscale";

  /* To change level of blur, adjust all "3" to a different number */
  filter: blur(@level);
  -webkit-filter: blur(@level);
  -moz-filter: blur(@level);
  -o-filter: blur(@level);
  -ms-filter: blur(@level);
  .base64DataUriBackground(@svg);
}


.clearToBlur:hover,
.blurToClear {
  .blur();
}

//encode SVG xml as base 64
//http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
.base64DataUriBackground (@encode, @property: ~"filter", @type: ~"image/svg+xml") {
  @dataUriPrefix: ~"url(data:@{type};base64,";
  @dataUriSuffix: ~")";

  // with btoa()
  //@b64DataUri: ~`(function(a,b,c){return a+btoa(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;

  // without
  @b64DataUri: ~`(function(a,b,c){function e(a){a=a.replace(/\r\n/g,'\n');var b='';for(var c=0;c<a.length;c++){var d=a.charCodeAt(c);if(d<128){b+=String.fromCharCode(d)}else if(d>127&&d<2048){b+=String.fromCharCode(d>>6|192);b+=String.fromCharCode(d&63|128)}else{b+=String.fromCharCode(d>>12|224);b+=String.fromCharCode(d>>6&63|128);b+=String.fromCharCode(d&63|128)}}return b}function f(a){var b='';var c,f,g,h,i,j,l;var m=0;a=e(a);while(m<a.length){c=a.charCodeAt(m++);f=a.charCodeAt(m++);g=a.charCodeAt(m++);h=c>>2;i=(c&3)<<4|f>>4;j=(f&15)<<2|g>>6;l=g&63;if(isNaN(f)){j=l=64}else if(isNaN(g)){l=64}b=b+d.charAt(h)+d.charAt(i)+d.charAt(j)+d.charAt(l)}return b}var d='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';return a+f(b)+c})('@{dataUriPrefix}','@{encode}','@{dataUriSuffix}')`;

  @property: @b64DataUri;
}

我明白了

.clearToBlur:hover,
.blurToClear {
  /* To change level of blur, adjust all "3" to a different number */

  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url("data:image/svg+xml");
}

---

您的代码与您引用的站点的代码之间有两大区别：

首先，当站点中的解决方案将其设置为IE9的基本

background

属性，并将

filter

保留为IE8及其以下的默认值时，您尝试在

filter

属性上设置

svg

---

第二，与第一个相关，这与其说是SVG的问题，不如说是SVG在

过滤器中的使用。我不相信Microsoft
filter
属性与
svg
完全不一样。您希望模糊元素，而不是更改背景。我不知道用纯css中的SVG实现这一点的方法。然而，“为什么”你需要这样做？你不能为IE a设置吗？
你试过直接存储base64编码数据吗？@feeela是的，我有，看看上面。我已经更新了
.clearToBlur:hover,
.blurToClear {
  /* To change level of blur, adjust all "3" to a different number */

  filter: blur(3px);
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: url("data:image/svg+xml");
}