title: how to highlight inner SVG elements of a group ( g )
body: <p>The concept I need to achieve is to <strong>highlight</strong> various elements momentarily. By highlighting I mean changing some aspects such as color.</p>
  
  <p>I have several <strong>SVG elements</strong> inside a <strong>g</strong> (group) element. Each of these inner elements have their own css style ( colors, borders, etc) which I want to preserve. I want to highlight the overall group of elements for a specific event, then bring it back to their original state. </p>
  
  <p>I can achieve the above by storing their original state, applying some style change to each of them, then restoring from the original ones, but that does not seem to be so immediate and elegant. </p>
  
  <p>What I was thinking is that there is some <strong>filtering</strong> options that i can apply to the <strong>g</strong> container element. This would allow to apply a filter, then remove it and all inner elements would show back to normal. </p>
  
  <p>example of elements I have:</p>
  
  <pre><code>&lt;g&gt;
       &lt;rect x="0" y="0" rx="5" width="100" height="60" style="stroke: green; stroke-width: 2; fill: yellow;"&gt;
       &lt;rect x="20" y="20" rx="5" width="10" height="10" style="stroke: green; stroke-width: 2; fill: yellow;"&gt;
  &lt;/g&gt;
  </code></pre>