使 SVG 线性渐变始终以特定角度填充矩形答案

【问题标题】：Make SVG linear gradient fill a rect at a particular angle always使 SVG 线性渐变始终以特定角度填充矩形
【发布时间】：2016-01-21 14:59:19
【问题描述】：

我需要用一个线性渐变填充不同纵横比和大小的矩形，该渐变从左上角到右下角，始终为 45 度（不仅仅是从一个角到另一个角）。

这是代码，它从一个角到另一个角填充矩形，我如何使它成为 45 度？

或者一个 jsfiddle https://jsfiddle.net/45nuu6L0/

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50">
  <linearGradient id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
     <stop  offset="0" style="stop-color:#000"/>
     <stop  offset="0.48" style="stop-color:#000;stop-opacity:0"/>
     <stop  offset="1" style="stop-color:#000"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#gradient)" />
</svg>

【问题讨论】：

渐变不是从左上角到右下角，或者是 45 度而不是两者（正方形除外）吗？
SVG 渐变不支持这种行为。我不相信有任何方法可以在不使用 JS 动态操作 SVG 渐变的情况下实现您所需要的。

标签： svg gradient linear-gradients

【解决方案1】：

我认为你将不得不使用你的 linearGradient 的 gradientTransform 属性。作为起点：

<!DOCTYPE html> <html> <body>

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="100" height="50">
  <linearGradient  gradientTransform="rotate(-45)" id="gradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1" >
 <stop  offset="0" style="stop-color:#000"/>
 <stop  offset="0.48" style="stop-color:#000;stop-opacity:0"/>
 <stop  offset="1" style="stop-color:#000"/>
  </linearGradient>
  <rect width="100%" height="100%" fill="url(#gradient)"  />
</svg>

</body></html>

【讨论】：