title: Background color of tspan element
body: <p>Is it possible to give SVG <code>&lt;tspan&gt;</code> element background color? If not, what would be the best way to simulate it?</p>
  
  <p>My goal is to give text background color, and I figured that filling <code>&lt;tspan&gt;</code> elements would be perfect — they already "outline" text chunks (<code>&lt;tspan&gt;</code> elements) that represent lines in multiline text.</p>
  
  <p>The example I'm working with:</p>
  
  <pre><code>&lt;text x="100" y="100" font-size="30"&gt;
    &lt;tspan&gt;hello&lt;/tspan&gt;
    &lt;tspan x="100" dy="1.2em"&gt;world&lt;/tspan&gt;
  &lt;/text&gt;
  </code></pre>
  
  <p>I tried "fill" attribute but it seems to affect fill (color) of text, not the area behind it:</p>
  
  <pre><code>&lt;tspan fill="yellow"&gt;hello&lt;/tspan&gt;
  </code></pre>
  
  <p>I also tried setting background-color via CSS:</p>
  
  <pre><code>&lt;style type="text/css"&gt;tspan { background-color: yellow }&lt;/tspan&gt;
  </code></pre>
  
  <p>..but that doesn't work (in at least Chrome 17 and Firefox 12).</p>
  
  <p>Wrapping tspan in <code>&lt;g&gt;</code> (or text itself in <code>&lt;g&gt;</code>) with "fill" doesn't work either:</p>
  
  <pre><code>&lt;g fill="yellow"&gt;&lt;tspan&gt;hello&lt;/tspan&gt;&lt;/g&gt;
  &lt;tspan&gt;&lt;g fill="yellow"&gt;hello&lt;/g&gt;&lt;/tspan&gt;
  </code></pre>
  
  <p>Aside from creating a <code>&lt;rect&gt;</code> element positioned at the same location — something I'd like to avoid — is there another way to achieve this?</p>