如何在 LESS 中使用 SVG答案

【问题标题】：How to use SVG in LESS如何在 LESS 中使用 SVG
【发布时间】：2013-01-28 19:51:16
【问题描述】：

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

【问题讨论】：

你试过直接存储base64编码的数据吗？
@feeela 是的，我有，看看上面。我已经更新了

标签： css svg less

【解决方案1】：

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

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

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

【讨论】：