title: Linear gradient across SVG line
body: <p>I am wondering how to make <code>linearGradient</code> <code>across (from top to bottom)</code> the line, as opposed to the example below where the gradient goes <code>along (from left to right)</code> the line.</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1&quot;&gt;
  &lt;defs&gt;
      &lt;linearGradient id=&quot;e&quot; x1=&quot;40&quot; y1=&quot;210&quot; x2=&quot;460&quot; y2=&quot;210&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;
          &lt;stop stop-color=&quot;steelblue&quot; offset=&quot;0&quot; /&gt;
          &lt;stop stop-color=&quot;red&quot; offset=&quot;1&quot; /&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
   &lt;line x1=&quot;40&quot; y1=&quot;210&quot; x2=&quot;460&quot; y2=&quot;210&quot; stroke=&quot;url(#e)&quot; stroke-width=&quot;30&quot; /&gt;
  &lt;/svg&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/2qcFG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2qcFG.png" alt="enter image description here" /></a></p>
  <p>Changing y coordinates works nicely for an un-rotated line and <code>linearGradient</code> now goes across (from top to bottom) the line:</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1&quot;&gt;
  &lt;defs&gt;
      &lt;linearGradient id=&quot;e&quot; x1=&quot;40&quot; y1=&quot;195&quot; x2=&quot;40&quot; y2=&quot;225&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;
          &lt;stop stop-color=&quot;steelblue&quot; offset=&quot;0&quot; /&gt;
          &lt;stop stop-color=&quot;red&quot; offset=&quot;1&quot; /&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
   &lt;line x1=&quot;40&quot; y1=&quot;210&quot; x2=&quot;460&quot; y2=&quot;210&quot; stroke=&quot;url(#e)&quot; stroke-width=&quot;30&quot;/&gt; 
  &lt;/svg&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/Opohr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Opohr.png" alt="enter image description here" /></a></p>
  <p>But this <strong>doesn't work when rotated</strong>:</p>
  <pre><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1&quot;&gt;
  &lt;defs&gt;
      &lt;linearGradient id=&quot;e&quot; x1=&quot;40&quot; y1=&quot;235&quot; x2=&quot;40&quot; y2=&quot;265&quot; gradientUnits=&quot;userSpaceOnUse&quot;&gt;
          &lt;stop stop-color=&quot;steelblue&quot; offset=&quot;0&quot; /&gt;
          &lt;stop stop-color=&quot;red&quot; offset=&quot;1&quot; /&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
   &lt;line x1=&quot;40&quot; y1=&quot;210&quot; x2=&quot;460&quot; y2=&quot;290&quot; stroke=&quot;url(#e)&quot; stroke-width=&quot;30&quot;/&gt; 
  &lt;/svg&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/D1AZq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D1AZq.png" alt="enter image description here" /></a></p>
  <p>And what I want to have is the rotated line with linear gradient across it.
  Something like this:
  <a href="https://i.stack.imgur.com/vy62j.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vy62j.png" alt="example" /></a></p>