title: How to style SVG <g> element?
body: <p>I have some SVG elements grouped together in a <code>&lt;g&gt;</code> element. I just want to style that <code>&lt;g&gt;</code> element to show grouping of elements. Like I want to give some background-color and a border to it. How it would be achieved?</p>
  
  <p>I tried <code>fill</code> and <code>stroke</code> attribute to <code>&lt;g&gt;</code> element, but it doesn't work. How it would be possible? Thanks in advance!</p>
  
  <p><a href="http://jsfiddle.net/VBmbP/1/" rel="noreferrer">Sample Here</a></p>
  
  <pre><code>&lt;svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;g fill="blue" stroke="2"&gt;
              &lt;rect id="svg_6" height="112" width="84" y="105" x="136" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#00ff00"/&gt;
          &lt;ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="271" cy="156" id="svg_7" rx="64" ry="56"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>