How do I select SVG group's elements inside an <object> tag

Question

0.00/5 (No votes)

See more:

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');
            }
        });
    });

Posted 18-Dec-19 21:56pm

DrgIonuţ

Updated 19-Dec-19 2:35am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2019-12-19T02:35:00

Solution 1

Change the selector you pass to the find method so that it only finds stop elements which are descendants of the element with the required ID:

JavaScript

$("object").contents().find('#g1 stop').each(function () {

Posted 19-Dec-19 2:35am

Richard Deeming

Comments

DrgIonuţ 19-Dec-19 8:38am

With this code, the color doesn't change at all when button is clicked.

Richard Deeming 19-Dec-19 8:58am

It works fine for me. Try debugging your code, or adding some console.debug statements to your script.

var stops = $('object').contents().find('#g1 stop');
console.debug(stops);

stops.each(function(){
    var stop = $(this);
    var color = stop.css('stop-color');
    console.debug(stop, color);
    
    if (color === 'rgb(77, 77, 77)') {
        stop.css('stop-color', '#00ff00');
    }
});

DrgIonuţ 19-Dec-19 9:21am

No error is displayed in my console.

Richard Deeming 19-Dec-19 9:22am

So debug your code, or add the console.debug statements and look at the debug output in the console.

DrgIonuţ 19-Dec-19 9:30am

I have used exactly the code you provided above. When I press the button, no error message is displayed in console.

Richard Deeming 19-Dec-19 9:35am

SO DEBUG YOUR CODE!

I can't debug it for you.

If you're not getting any DEBUG output in the console, then your button click handler is not firing.