Question

我需要使用从左上角到右下角的单个线性渐变填充不同宽高比和大小的矩形，并且始终在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>

Answer 1

我想你必须使用linearGradient的gradientTransform属性。作为一个起点：

＆＃13;

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

＆＃13;

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

1 个答案: