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

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

这是从一个角到另一个角填充矩形的代码，我如何使其在45度

或是一个小插曲

---

我认为您必须使用linearGradient的gradientTransform属性。作为起点：

---

我认为您必须使用linearGradient的gradientTransform属性。作为起点：

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

<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>