我已经创建了一个多站SVG线性渐变混合，但是在旋转模仿css3线性渐变规范时我无法使SVG缩放。它适用于水平和垂直渐变。在45度，135度，225度和315度时，它也可以完美地工作，但仅限于物体的比例为1：1。否则，它就不太对了！
我尝试使用preserveAspectRatio =＆＃34; xMaxYMax meet＆＃34;并试图让事情与背景大小合作：覆盖或包含，但没有任何方法可以令人满意。
我最初尝试过LESS中的svg-gradient（）函数，但它并没有做我需要做的事情（参见我之前的帖子 - less-svg-gradient-function-with-multiple-variables） - 所以这就是导致我失望的原因路径。
有没有人有一个精确到css3规范的公式？
到目前为止，这是我所拥有的......我在网上找不到任何类似的东西。
.multigradient(@id: gradient;@size: contain; @direction: to right; @color){
.case(@direction); // apply named direction values
.case(@a) when (@a = ~"to top"){@part2:~'x1="0%" y1="100%" x2="0%" y2="0%">';@angle:@direction;@angle2: ~"bottom";}
.case(@a) when (@a = ~"to top right"){@part2:~'x1="0%" y1="100%" x2="100%" y2="0%">';@angle:@direction;@angle2: ~"bottom left";}
.case(@a) when (@a = ~"to right"){@part2:~'x1="0%" y1="0%" x2="100%" y2="0%">';@angle:@direction;@angle2: ~"left";}
.case(@a) when (@a = ~"to bottom right"){@part2:~'x1="0%" y1="0%" x2="100%" y2="100%">';@angle:@direction;@angle2: ~"top left";}
.case(@a) when (@a = ~"to bottom"){@part2:~'x1="0%" y1="0%" x2="0%" y2="100%">';@angle:@direction;@angle2: ~"top";}
.case(@a) when (@a = ~"to bottom left"){@part2:~'x1="100%" y1="0%" x2="0%" y2="100%">';@angle:@direction;@angle2: ~"top right";}
.case(@a) when (@a = ~"to left"){@part2:~'x1="100%" y1="0%" x2="0%" y2="0%">';@angle:@direction;@angle2: ~"right";}
.case(@a) when (@a = ~"to top left"){@part2:~'x1="100%" y1="100%" x2="0%" y2="0%">';@angle:@direction;@angle2: ~"bottom right";}
.case(@a) when (isnumber(@a) = true) { // for numerical values
@angle: unit(@a, deg); //send degrees unchanged to standards-compliant linear-gradient
@angle2: 90 - @angle; //send degrees corrected to old -prefixed-linear-gradients
.calc(@a + 90); // calculate svg co-ords
.calc(@b) when (@b < 0){ @c: @b + 360; .calc(@c); }
.calc(@b) when (@b >= 360){ @c: mod(@b, 360); .calc(@c); }
.calc(@b) when (@b >= 0) and (@b < 45) {@x1: 100;@y1: 50 + (tan(unit(@b, deg)) * 50);@x2: 0;@y2: 50 - (tan(unit(@b, deg)) * 50);}
.calc(@b) when (@b >= 45) and (@b < 90){@x1: 100 - (tan(unit(mod(@b, 45), deg)) * 50);@y1: 100;@x2: tan(unit(mod(@b, 45), deg)) * 50;@y2: 0;}
.calc(@b) when (@b >= 90) and (@b < 135){@x1: 50 - (tan(unit(mod(@b, 45), deg)) * 50);@y1: 100;@x2: 50 + (tan(unit(mod(@b, 45), deg)) * 50);@y2: 0;}
.calc(@b) when (@b >= 135) and (@b < 180){@x1: 0;@y1: 100 - (tan(unit(mod(@b, 45), deg)) * 50);@x2: 100;@y2: tan(unit(mod(@b, 45), deg)) * 50;}
.calc(@b) when (@b >= 180) and (@b < 225){@x1: 0;@y1: 50 - (tan(unit(mod(@b, 45), deg)) * 50);@x2: 100;@y2: 50 + (tan(unit(mod(@b, 45), deg)) * 50);}
.calc(@b) when (@b >= 225) and (@b < 270){@x1: tan(unit(mod(@b, 45), deg)) * 50;@y1: 0;@x2: 100 - (tan(unit(mod(@b, 45), deg)) * 50);@y2: 100;}
.calc(@b) when (@b >= 270) and (@b < 315){@x1: 50 + (tan(unit(mod(@b, 45), deg)) * 50);@y1: 0;@x2: 50 - (tan(unit(mod(@b, 45), deg)) * 50);@y2: 100;}
.calc(@b) when (@b >= 315) and (@b < 360){@x1: 100;@y1: tan(unit(mod(@b, 45), deg)) * 50;@x2: 0;@y2: 100 - (tan(unit(mod(@b, 45), deg)) * 50);}
/*output: ~"svg co-ords:- x1: @{x1} y1: @{y1} x2: @{x2} y2: @{y2}";*/ // enable to print values to stylesheet (for debugging)
@part2:~'x1="@{x1}%" y1="@{y1}%" x2="@{x2}%" y2="@{y2}%">';
}
.loop(length(@color), ~""); //loop through colours and append to the variable
.loop(@i,@d) when (@i > 0) {
@stop: extract(@color, @i);
@offset: extract(@stop, 2) ;
@stopcolor: extract(@stop, 1) ;
@part3:~'<stop offset="@{offset}" stop-color="@{stopcolor}" />@{d}';
.case2(@i);
.case2(@z) when (@z = 1){ // on final loop construct and encode svg
@part1:~'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="@{id}" gradientUnits="userSpaceOnUse" ';
@part4:~'</linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#@{id})" /></svg>';
/*output2: ~"@{part1}@{part2}@{part3}@{part4}";*/ // enable to print unencoded svg to stylesheet (for debugging)
// Thank you to Phil Brown for B64encode, taken from - http://blog.philipbrown.id.au/2012/09/base64-encoded-svg-gradient-backgrounds-in-less/
@dataPrefix: ~"url(data:image/svg+xml;base64,";
@dataSuffix: ~")";
@dataContent: ~"@{part1}@{part2}@{part3}@{part4}";
@b64Out: ~`(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})('@{dataPrefix}','@{dataContent}','@{dataSuffix}')`;
background: ~"@{b64Out}"; // print the mofo to the css
}
.loop((@i - 1),@part3); // next iteration sends variable to be joined
}
background: -moz-linear-gradient(@angle2, @color);
background: -webkit-linear-gradient(@angle2, @color);
background: -ms-linear-gradient(@angle2, @color);
background: -o-linear-gradient(@angle2, @color);
background: linear-gradient(@angle, @color);
background-size: @size;
}
// Test cases: requires id, size, angle, at least two colorstops
// =============================================================
.my-class{
.multigradient(gradient2; contain; 0; red 0, orange 16.6%, yellow 33.3%, green 50%, blue 66.6%, indigo 83.3%, violet 100%);
}
.my-class2{
.multigradient(i-am-unique; contain; to top right; red 0, green 50%, blue 100%);
}
.my-class3{
.multigradient(grad3; cover; 135; pink 0, rgba(0,0,255,1.0) 50%, #fff 100%);
}
.my-class4{
.multigradient(grad4; contain; to top; pink 0, blue 50%, white 100%);
}
.my-class5{
.multigradient(grad5; cover; to bottom; rgba(0,2,174,1) 0%, rgba(0,2,174,1) 22.32142857142857%, rgba(0,2,137,1) 22.32142857142857%, rgba(0,2,137,1) 32.14285714285714%, rgba(0,1,48,1) 32.14285714285714%, rgba(1,32,99,1) 60.71428571428571%, rgba(3,41,112,1) 60.71428571428571%, rgba(3,41,112,1) 64.28571428571429%, rgba(0,9,45,1) 64.28571428571429%, rgba(0,9,45,1) 96.42857142857143%, rgba(3,41,112,1) 96.42857142857143%, rgba(3,41,112,1) 100%);
}
.my-class6{
.multigradient(browns; cover; 45; DarkKhaki 0, Khaki 4%, PaleGoldenrod 8%, PeachPuff 12%, Moccasin 16%, PapayaWhip 20%, LightGoldenrodYellow 24%, LemonChiffon 28%, LightYellow 32%, Cornsilk 36%, BlanchedAlmond 40%, Bisque 44%, NavajoWhite 48%, Wheat 52%, BurlyWood 56%, Tan 60%, RosyBrown 64%, SandyBrown 68%, Goldenrod 72%, DarkGoldenrod 76%, Peru 80%, Chocolate 84%, SaddleBrown 88%, Sienna 92%, Brown 96%, Maroon 100%);
}
// HTML for test cases
// ===================
<div style="border:1px solid #000;height:200px;width:200px;display:inline-block;" class="my-class"></div>
<div style="border:1px solid #000;height:200px;width:200px;display:inline-block;" class="my-class2"></div>
<div style="border:1px solid #000;height:200px;width:200px;display:inline-block;" class="my-class3"></div>
<div style="border:1px solid #000;height:200px;width:200px;display:inline-block;" class="my-class4"></div>
<div style="border:1px solid #000;height:200px;width:200px;display:inline-block;" class="my-class5"></div>
<div style="border:1px solid #000;height:200px;width:400px;display:inline-block;" class="my-class6"></div>
只需剪切并粘贴到codepen
之类的内容即可答案 0 :(得分：1)
最后我解决了我的问题！我创建了一个LESS可旋转多站线性梯度SVG mixin，具有纵横比以保持旋转真实。我的诚实观点比Colorzilla或MS渐变制造者生成的SVG更强大，因为它设置了x1 y1 x2和y2值以及viewBox，因此您可以精确地旋转渐变而不会失真。 ：）
生成SVG渐变所需要做的就是这样，...... （ID，角度，colorstops，比率）
.multigradient(uniqueID; 45; #fff 0, #000 100%; 2, 1);