css - 可旋转的多站 SVG 线性渐变混合

Question

我已经创建了一个多站 SVG 线性渐变混合，但在旋转以模仿 css3 线性渐变规范时，我无法让 SVG 缩放。它非常适合水平和垂直渐变。在 45、135、225 和 315 度时，它也能完美工作，但前提是物体的比例为 1:1。否则，就是不太对劲!

我尝试使用 preserveAspectRatio="xMaxYMax meet"等，并尝试使用 background-size:cover 或 contain，但没有任何效果令人满意。

我最初在 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 的内容中

Answer 1

终于找到解决问题的方法了!我创建了一个 LESS 可旋转多站线性渐变 SVG 混合，具有纵横比以保持旋转真实。在我看来，比 Colorzilla 或 MS 渐变生成器生成的 SVG 更强大，因为它设置了 x1 y1 x2 和 y2 值以及 viewBox，因此您可以精确地旋转渐变而不会失真。 :)

生成 SVG 渐变所需要做的就是这样，...(ID、 Angular 、色标、比例)

.multigradient(uniqueID; 45; #fff 0, #000 100%; 2, 1);

Rotatable Multi-stop SVG linear gradient mixin on Codepen