CODEWITHSUNDEEP
javascriptanimationsvgcdataembedding
Roberto Matthews
Roberto Matthews

Reputation: 1

Can I embed JavaScript code within an SVG file?

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>

Upvotes: 0

Views: 707

Answers (2)

Mister Jojo
Mister Jojo

Reputation: 22265

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>

Upvotes: 1

Sebastian B.
Sebastian B.

Reputation: 2191

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>

Upvotes: 0

Related Questions