1

我正在尝试使用内联 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");
}
4

1 回答 1

0

您的代码与您引用的网站的代码有两个很大的不同：

首先，当站点中的解决方案将其设置为 IE9 的基本属性并保持IE8 及以下版本的默认值时，您尝试设置svgon属性。filterbackgroundfilter

其次，与第一个相关，这与其说是 SVG 和 LESS 的问题，不如说是 SVG 在filter. 我不相信 Microsoft 的filter财产以svg你试图做的方式工作。您想要模糊元素，而不是更改背景。我不知道在纯 css 中使用 SVG 的方法。但是，“为什么”你需要？不能为 IE 设置模糊滤镜吗？

于 2013-01-28T11:51:16.083 回答