CODEWITHSUNDEEP
svg
Puspam
Puspam

Reputation: 2777

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

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: enter image description here

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: enter image description here

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: enter image description here

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?

Upvotes: 0

Views: 79

Answers (1)

Kaiido
Kaiido

Reputation: 136618

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.

Upvotes: 1

Related Questions