Can I embed JavaScript code within an SVG file?

Question

Please look at the following code. I cannot for the life of me figure out what's wrong with the JavaScript that hinders the onclick event. The CSS styling is working well, of course, but even though the JS works as-is on codepen, it won't work here.

<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    #mySVG {
      cursor: pointer;
    }
    @keyframes circleGrow {
      to {r:50}
    }
    #myCircle {
      animation: circleGrow 1s 1s forwards;
    }
    @keyframes strokeDraw {
      to {stroke-dashoffset: 0}
    }
    @keyframes toFill {
      to {fill: white;}
    }
    #myText {
      animation: strokeDraw 2.5s 2s linear forwards,
        toFill 1s 4.5s linear forwards;
    }
  </style>
  <script>
    //<![CDATA[
      var mySVG = document.getElementById("mySVG"),
        myCircle = document.getElementById("myCircle"),
        myText = document.getElementById("myText");

    mySVG.onclick = function(){

      myCircle.style.animation = "null";
      myText.style.animation = "null";

      setTimeout(function(){

        myCircle.style.animation = "";
        myText.style.animation = "";

      },10);

    }
    //]]>

  </script>
  <circle id="myCircle" cx="50" cy="50" r="0" fill="maroon" />
  <text id="myText" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="40" fill="transparent" stroke="white" stroke-dasharray="190" stroke-dashoffset="190">Hello</text>
</svg>

Mister Jojo · Accepted Answer · 2019-09-17 00:34:28Z

1

You have to put the script part after the svg elements, because the interpretation is done from top to bottom and the JS code can not take into account elements that do not exist (because they will only be defined later).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body { background-color: cornflowerblue }
  </style>
</head>
<body>
  <svg id="mySVG" viewBox="0 10 160 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <style>
      #mySVG { cursor: pointer; }
      @keyframes circleGrow { to {r:50} }
      #myCircle { animation: circleGrow 1s 1s forwards; }
      @keyframes strokeDraw { to {stroke-dashoffset: 0} }
      @keyframes toFill { to {fill: white;} }
      #myText {
        animation: strokeDraw 2.5s 2s linear forwards,
          toFill 1s 4.5s linear forwards;
      }
    </style>
    <circle id="myCircle" cx="50" cy="50" r="0" fill="maroon" />
    <text id="myText" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="40" fill="transparent" stroke="white" stroke-dasharray="190" stroke-dashoffset="190">Hello</text>
    <script>
      //<![CDATA[
        var mySVG    = document.getElementById("mySVG")
          , myCircle = document.getElementById("myCircle")
          , myText   = document.getElementById("myText")
          ;
        mySVG.onclick = function()
        {
          myCircle.style.animation = "null";
          myText.style.animation   = "null";

          setTimeout(function()
          {
            myCircle.style.animation = "";
            myText.style.animation   = "";
          },10);
        }
      //]]>
    </script>
  </svg>
</body>
</html>

edited Sep 17, 2019 at 0:34

answered Sep 16, 2019 at 23:02

Mister Jojo

23k6 gold badges28 silver badges45 bronze badges

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

2 Comments

Roberto Matthews Over a year ago

Ha! Perfect!!! Duh! Should have thought about that. But that's why stackoverflow exists!!!

Mister Jojo Over a year ago

@RobertoMatthews The principle on stackoverflow is to validate an answer, and it gives reputation points, which gives me better chances to find a job

Sebastian B. · Accepted Answer · 2019-09-16 22:48:25Z

I don't know what you mean with "it wont work here", but the reason could be a race condition when the DOM is not ready yet. You could try wrapping your code in a document-ready handler:

<html>

<body><svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    #mySVG {
      cursor: pointer;
    }
    @keyframes circleGrow {
      to {r:50}
    }
    #myCircle {
      animation: circleGrow 1s 1s forwards;
    }
    @keyframes strokeDraw {
      to {stroke-dashoffset: 0}
    }
    @keyframes toFill {
      to {fill: white;}
    }
    #myText {
      animation: strokeDraw 2.5s 2s linear forwards,
        toFill 1s 4.5s linear forwards;
    }
  </style>
  <script>
    //<![CDATA[

    // Equivalent of jQuery $(document).ready() in vanilla JavaScript
    // (taken from http://youmightnotneedjquery.com/#ready )
    function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    ready(function() {
      var mySVG = document.getElementById("mySVG"),
          myCircle = document.getElementById("myCircle"),
          myText = document.getElementById("myText");

      mySVG.onclick = function(){

        myCircle.style.animation = "null";
        myText.style.animation = "null";

        setTimeout(function(){

          myCircle.style.animation = "";
          myText.style.animation = "";

        },10);
      }
    })
    //]]>

  </script>
  <circle id="myCircle" cx="50" cy="50" r="0" fill="maroon" />
  <text id="myText" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="40" fill="transparent" stroke="white" stroke-dasharray="190" stroke-dashoffset="190">Hello</text>
  </svg></body>

</html>

Collectives™ on Stack Overflow

Can I embed JavaScript code within an SVG file?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related