title: Is it possible to load an external SVG fill into an inline-svg element?
body: <p>I'd like to create an inline-svg text element with a <code>fill</code> attribute loading a gradient defined in an external svg document.</p>
  
  <h3>Inline SVG</h3>
  
  <pre><code>&lt;svg&gt;
      &lt;text fill="url(/path/to/svg.svg#gradient)"&gt;Mask this text&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <h3>/path/to/svg.svg</h3>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8" standalone="no"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;defs&gt;
          &lt;linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"&gt;
              &lt;stop offset="0%" style="stop-color:#ffeab4; stop-opacity:1" /&gt;
              &lt;stop offset="30%" style="stop-color:#ed9f3b; stop-opacity:1" /&gt;
              &lt;stop offset="40%" style="stop-color:#ed9f3b; stop-opacity:1" /&gt;
              &lt;stop offset="70%" style="stop-color:#ffeab4; stop-opacity:1" /&gt;
              &lt;stop offset="100%" style="stop-color:#ed9f3b; stop-opacity:1" /&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/jsRrE/" rel="nofollow">jsfiddle test case</a> and here is a <a href="https://gist.github.com/potench/5146989#file-gradient-svg" rel="nofollow">gist of the SVG gradient</a> I'm trying to load.</p>
  
  <h3>Question</h3>
  
  <ul>
  <li>Is it possible to load an external <code>fill</code> into an inline-svg element?</li>
  <li>Have I just defined my external gradient incorrectly or am referencing it incorrectly?</li>
  </ul>