Make SVG linear gradient fill a rect at a particular angle always
<p>I need to fill rectangles of different aspect ratios and sizes with a single linear gradient that goes from top left to bottom right, and always at 45deg (not just from corner to corner).</p>

<p>Here's the code, which fills the rect from corner to corner, how do I make it be at 45deg? </p>

<p>Or a jsfiddle <a href="https://jsfiddle.net/45nuu6L0/" rel="nofollow">https://jsfiddle.net/45nuu6L0/</a></p>

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