title: Changing style of SVG elements in a g group using JS
body: <p>Can I change the css style, such as fill or stroke, for all elements within a g group using JS?
  Here's the svg, script and the external css:</p>
  
  <pre><code>&lt;g id="trajectories" class="trajectory"&gt;
      &lt;circle id="tr1" cx="0" cy="0" r="75" /&gt;
      &lt;circle id="tr2" cx="0" cy="0" r="110" /&gt;
      &lt;circle id="tr3" cx="0" cy="0" r="160" /&gt;
      &lt;circle id="tr4" cx="0" cy="0" r="230" /&gt;
      &lt;circle id="tr5" cx="0" cy="0" r="350" /&gt;
      &lt;circle id="tr6" cx="0" cy="0" r="475" /&gt;
      &lt;circle id="tr7" cx="0" cy="0" r="625" /&gt;
      &lt;circle id="tr8" cx="0" cy="0" r="750" /&gt;
  &lt;/g&gt;
  
  function mouseDown() {
  
      svgElement = document.getElementById("trajectories");
      svgElement.style.stroke = "Black";
  
  }
  
  g.trajectory{
      fill: none;
      stroke: rgba(30,30,30,1);
      }
  </code></pre>
  
  <p>The circles in the g inherit the fill and stroke of the class g.trajectory when first drawn, but attempting to change the styling of the g element does nothing. I could change the styles of the circles individually, but is it possible to change them all just by targeting the g element? </p>