title: Make SVG linear gradient fill a rect at a particular angle always
body: <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>