How to include SVG within an SVG document which has JavaScript code?

Question

Please understand this question properly before marking as duplicate.

There are many questions like this one in StackOverflow, but my question is slightly different from those.

I have a chakra.svg file, whose code is this:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" id="b">
    <circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
    <script>
        <![CDATA[
            for(i=0;i<24;i++)
            {
                var l=document.createElementNS("http://www.w3.org/2000/svg","line");
                l.setAttributeNS(null,"x1","50");
                l.setAttributeNS(null,"y1","50");
                l.setAttributeNS(null,"x2","5");
                l.setAttributeNS(null,"y2","50");
                l.setAttributeNS(null,"stroke-width",2);
                l.setAttributeNS(null,"stroke","blue");
                l.setAttributeNS(null,"transform","rotate("+(i/24*360)+",50,50)");
                document.querySelector("#b").appendChild(l);
            }
        ]]>
    </script>
</svg>

The output is rendered as expected, like this:

I have another file, India_flag.svg whose code is this:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
    <rect x="0" y="0" height="33" width="180" fill="#f93"/>
    <rect x="0" y="33" height="34" width="180" fill="white"/>
    <rect x="0" y="67" height="33" width="180" fill="green"/>
</svg>

The output of this file is also rendered as expected:

But, now the problem is, when I am trying to insert the chakra.svg file inside the India_flag.svg file using the image tag like this:

<image xlink:href="chakra.svg" x="70" y="35" height="30" width="30"/>

The output should have been that the wheel is placed at the centre of the flag, but I am getting this output:

The chakra.svg file is rendered, but the JavaScript code in that file did not run, only the circle is rendered. What am I doing wrong and how to achieve my objective?

Have you defined (or imported) your javascript before your code? :-) — R4444
– R4444, Commented Mar 29, 2019 at 6:15

Kaiido · Accepted Answer · 2019-03-29 06:35:08Z

1

SVG documents when loaded inside an <image> tag (or HTML <img> for that matter) are sand-boxed and won't allow the execution of scripts, nor will they be interactive (i.e no user-event).

To circumvent that, you need an other way to append you svg. The simple solution would be to copy its markup directly in the main one:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="170" height="100">
  <rect x="0" y="0" height="33" width="180" fill="#f93"/>
  <rect x="0" y="33" height="34" width="180" fill="white"/>
  <rect x="0" y="67" height="33" width="180" fill="green"/>
  <svg x="70" y="35" height="30" width="30" id="b" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" stroke-width="2" stroke="blue" fill="none"/>
    <script>
      <![CDATA[
        for(i=0;i<24;i++) {
          var l=document.createElementNS("http://www.w3.org/2000/svg","line");
          l.setAttribute("x1","50");
          l.setAttribute("y1","50");
          l.setAttribute("x2","5");
          l.setAttribute("y2","50");
          l.setAttribute("stroke-width",2);
          l.setAttribute("stroke","blue");
          l.setAttribute("transform","rotate("+(i/24*360)+",50,50)");
          document.querySelector("#b").appendChild(l);
        }
      ]]>
    </script>
  </svg>
</svg>

An other solution, would have been to do the inverse: load your flag image from the one with the script: plnkr.

edited Mar 29, 2019 at 6:35

answered Mar 29, 2019 at 6:24

Kaiido

140k15 gold badges266 silver badges333 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Kaiido Over a year ago

Yes that was a bad idea sorry use don't allow script execution either, edited since then.

Puspam Over a year ago

@Ruturaj said something about importing JavaScript before the code. What is it and how to do that?

Kaiido Over a year ago

No offense whatsoever, but I fear they simply don't know what they are talking about and thrown some random words in a sentence.

Puspam Over a year ago

So, is there no way of doing what I want, that is, including a SVG document inside another SVG document along with the running JavaScript code?

Kaiido Over a year ago

Well the code in my answer does that. It could be automated by js if you need. And iIf you absolutely need it to be an external svg, then you'd have to resort on using a <foreignObject> that would host an html <iframe> that would load your file.

|

Collectives™ on Stack Overflow

How to include SVG within an SVG document which has JavaScript code?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related