title: SVG Fill and Transform
body: <p>I understand that <code>fill</code> is applied after <code>transform</code>, but I don't understand why. I've looked in the spec and cannot find information about why this might be.</p>
  
  <p>I'd like to know if there is a way to have the <code>fill</code> applied to a group of elements, some using <code>transform: rotate</code> in a consistent manner. To illustrate the problem see the example code below:</p>
  
  <pre><code>&lt;svg width='38' height='18' viewBox='0 0 38 18' xmlns='http://www.w3.org/2000/svg'&gt;
      &lt;defs&gt;
          &lt;linearGradient id='gradientFill' x2='0' y2='100%' gradientUnits='userSpaceOnUse'&gt;
              &lt;stop stop-color='hsl(0, 0%, 0%)' /&gt;
              &lt;stop offset='100%' stop-color='hsl(0, 0%, 100%)' /&gt;
          &lt;/linearGradient&gt;
          &lt;path id='shape' d='M0,0m9,0c-3.92,0,-7.24,2.51,-8.48,6h3.29c0.83,-1.92,2.8,-3.56,5.19,-3c2.52,0.59,3,3.55,3,6c0,3.6,-0.6,6,-3,6s-3,-2.4,-3,-6h-6c0,4.97,4.03,9,9,9c4.97,0,9,-4.03,9,-9s-4.03,-9,-9,-9z'/&gt;
          &lt;g id='test'&gt;
              &lt;use xlink:href='#shape'&gt;&lt;/use&gt;
              &lt;use transform='translate(20,0) rotate(180,9,9)' xlink:href='#shape'&gt;&lt;/use&gt;
          &lt;/g&gt;
      &lt;/defs&gt;
      &lt;use class='logo' xlink:href='#test' fill="url(#gradientFill)"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>As you see, on the non-rotated element the gradient runs top to bottom, as expected. However on the rotated element the gradient is also rotated so that it runs from bottom to top. This seems inconsistent to me, as the <code>fill</code> is applied to a group and not the individual objects. </p>
  
  <p>My ultimate desire is to have the linear gradient flow from top to bottom on both shapes, but I'd like to continue using the <code>use</code> and <code>transform</code> method, if possible.</p>
  
  <p>Can someone point me in the right direction in regards to the spec, and also suggest a solution to accomplish my goal?</p>