title: Select SVG group's elements inside an <object> tag
body: <p>I have a SVG external file which is called in an <code>&lt;object&gt;</code> tag. </p>
  
  <pre><code> &lt;object data="Img/PumpStation/Interfata.svg" type="image/svg+xml" id="p1"&gt;&lt;/object&gt;
  </code></pre>
  
  <p>The SVG contains two groups. </p>
  
  <pre><code> &lt;svg&gt;
     &lt;g id="g1"&gt;
        &lt;linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="93.75" x2="30.2922" y2="93.75" gradientTransform="matrix(1 0 0 -1 0 112.5)"&gt;
        &lt;stop offset="0.01" style="stop-color:#4F4D4D" /&gt;
        &lt;stop offset="0.51" style="stop-color:#F5F5F5" /&gt;
        &lt;stop offset="1" style="stop-color:#4D4D4D" /&gt;
      &lt;/linearGradient&gt;
      &lt;path fill="url(#SVGID_2_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,3.266V37.5h23.423v-0.45V3.266l-1.577-2.703L27.59,0   h-0.676h-1.239H10.248L7.545,1.577L6.982,2.703L6.869,3.266" /&gt;
  
      &lt;linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="78.1523" x2="30.2922" y2="78.1523" gradientTransform="matrix(1 0 0 -1 0 112.5)"&gt;
        &lt;stop offset="0.01" style="stop-color:#4D4D4D" /&gt;
        &lt;stop offset="0.51" style="stop-color:#F5F5F5" /&gt;
        &lt;stop offset="1" style="stop-color:#4D4D4D" /&gt;
      &lt;/linearGradient&gt;
      &lt;path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,34.347h23.423" /&gt;
  
      &lt;linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="6.8694" y1="105.8555" x2="30.2922" y2="105.8555" gradientTransform="matrix(1 0 0 -1 0 112.5)"&gt;
        &lt;stop offset="0.01" style="stop-color:#4D4D4D" /&gt;
        &lt;stop offset="0.51" style="stop-color:#F5F5F5" /&gt;
        &lt;stop offset="1" style="stop-color:#4D4D4D" /&gt;
      &lt;/linearGradient&gt;
      &lt;path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,6.645h23.423" /&gt;
     &lt;/g&gt;
     &lt;g id="g2"&gt;
       &lt;linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1"&gt;
         &lt;stop offset="5%" stop-color="#01E400"&gt;&lt;/stop&gt;
         &lt;stop offset="25%" stop-color="#FEFF01"&gt;&lt;/stop&gt;
         &lt;stop offset="40%" stop-color="#FF7E00"&gt;&lt;/stop&gt;
         &lt;stop offset="60%" stop-color="#FB0300"&gt;&lt;/stop&gt;
         &lt;stop offset="80%" stop-color="#9B004A"&gt;&lt;/stop&gt;
         &lt;stop offset="100%" stop-color="#7D0022"&gt;&lt;/stop&gt;
      &lt;/linearGradient&gt;
     &lt;circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"&gt;&lt;/circle&gt;
     &lt;/g&gt;
   &lt;/svg&gt;
  </code></pre>
  
  <p>And a button: </p>
  
  <pre><code>&lt;asp:Button ID="StartP1" class="startP btn btn-light" runat="server" Text="Start P1" Style="width: 100%" /&gt;
  </code></pre>
  
  <p>I know how to replace all <code>stop-color</code> from the <code>stop</code> tags on click action. I do it by using this jQuery function:</p>
  
  <pre><code>    jQuery('.startP').on('click', function () {            
          $("object").contents().find('stop').each(function () {
              var color = jQuery(this).css('stop-color');
              if (color === 'rgb(77, 77, 77)') {
                  jQuery(this).css('stop-color', '#00ff00');
              }
          });
      });
  </code></pre>
  
  <p>My question is how could I implement the jQuery function only for the group with the <code>id="g1"</code> and not for both groups of my SVG?</p>