I have a SVG external file which is called in an <object> tag.
<object data="Img/PumpStation/Interfata.svg" type="image/svg+xml" id="p1"></object>
The SVG contains two groups.
<svg>
<g id="g1">
<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)">
<stop offset="0.01" style="stop-color:#4F4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<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" />
<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)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_3_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,34.347h23.423" />
<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)">
<stop offset="0.01" style="stop-color:#4D4D4D" />
<stop offset="0.51" style="stop-color:#F5F5F5" />
<stop offset="1" style="stop-color:#4D4D4D" />
</linearGradient>
<path fill="url(#SVGID_4_)" stroke="#4C4C4C" stroke-width="0.25" d="M6.869,6.645h23.423" />
</g>
<g id="g2">
<linearGradient id="linearColors" x1="0" y1="0" x2="1" y2="1">
<stop offset="5%" stop-color="#01E400"></stop>
<stop offset="25%" stop-color="#FEFF01"></stop>
<stop offset="40%" stop-color="#FF7E00"></stop>
<stop offset="60%" stop-color="#FB0300"></stop>
<stop offset="80%" stop-color="#9B004A"></stop>
<stop offset="100%" stop-color="#7D0022"></stop>
</linearGradient>
<circle r="120" cx="150" cy="150" class="external-circle" stroke-width="4" fill="none" stroke="url(#linearColors)"></circle>
</g>
</svg>
My button:
<asp:Button ID="StartP1" class="startP btn btn-light" runat="server" Text="Start P1" Style="width: 100%" />
I know how to replace all stop-color from the stop tags on click action. I do it by using this jQuery function.
My question is how could I implement the jQuery function only for the group with the id="g1" and not for both groups of my SVG?
What I have tried:
My jQuery function:
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');
}
});
});