title: How to apply a color to a SVG Text element
body: <p>Okay... I'm going nuts over here. I've started experimenting with SVG. Working with SVG and applying CSS classes to it works like a charm. I just cant figure out what i'm doing wrong, but i just cant get the class to work on a svg text element. I've stripped it all the way down and this is what i got:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='UTF-8'&gt;
      &lt;title&gt;Playground&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;style type="text/css"&gt;
          .mainsvg {
              height: 320px;
              border: 1px solid red;
              width: 400px;
          }
          .caption {
              color: yellow;
          }
      &lt;/style&gt;
      &lt;h2&gt;SVG - Sandbox&lt;/h2&gt;
      &lt;div&gt;
          &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="mainsvg"&gt;
              &lt;text x="65" y="40" class="caption"&gt;Fact&lt;/text&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>According to <a href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">http://www.w3.org/TR/SVG/styling.html#ClassAttribute</a> this should work...</p>
  
  <p>Any hints/tips on what to change, or an alternative?</p>