Question

我正在尝试使用内联SVG（内联对于这个项目非常重要，因为它需要在单个css文件中轻松移植）并且我决定使用LESS。我找到了这个页面http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/，其中讨论了一种方法。但是，我似乎无法让这个工作。我正在使用带有LESS编译器插件的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;
}

有关如何将SVG与LESS集成的任何建议？可能吗？我也尝试了with btoa()方法，它也犯了同样的错误。

更新------------------------------------------- --------------- 我已经尝试直接放入SVG了。当我这样做......

.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);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='3' /></filter></svg>#grayscale");
}

我明白了......

.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");
}

Answer 1

您的代码与您引用的网站之间存在两个巨大差异：

首先，当网站中的解决方案将其设置为IE9的基本svg属性并保留{{}时，您尝试在filter属性上设置background 1}}作为IE8的默认值并在。

之下

第二，与第一个相关，这不是SVG和LESS的问题，因为它是filter中使用的SVG。我不相信Microsoft filter属性与您尝试这样做的方式完全符合filter。您想要模糊元素，而不是进行背景更改。我不知道在纯CSS中使用SVG的方法。但是，“为什么”你需要？你能不能为IE设置blur filter？

如何在LESS中使用SVG

1 个答案: