CODEWITHSUNDEEP
javascripthtmlsvg
Ase Last
Ase Last

Reputation: 7

SVG with JS inside it not rendering in img, object or iframe

Problem is in the title ... please do the following: (codes to put in the files are below)

  1. make an svg + open the svg on its own (call it keysaway.svg)
  2. make html + open the html on its own

you'll see that the svg runs that very simple up and down animation but it wont work when linked to the html file ... well if you inspect element you'll see that the js from the svg file is actually running and the circle is moving up and down but it just won't render and I have no idea why, please take a look

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testing</title>
</head>
<style>

:root {
    --background: #131122 ;
}


*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
    font-size: 10px;
    
}

/* 
colors:
#B31F15
#BD1748
#A61C8A
#A217BD
#6E15B3

*/

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 0;
    box-sizing: border-box;
    background-color:var(--background);
}

</style>
<body>

<!-- <img src="keysaway.svg">
<object type="image/svg+xml" data="keysaway.svg"></object> -->
<iframe src="keysaway.svg" frameborder="0"></iframe>



</body>
</html>

SVG:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle fill="red" cx="250" cy="250" r="50"  />
  <script type="text/javascript"><![CDATA[
    var KEY = { w:87, a:65, s:83, d:68 };
    var moveSpeed = 5;
    var circle = document.getElementsByTagName("circle")[0];
    var x = circle.getAttribute('cx')*1,
        y = circle.getAttribute('cy')*1,
        r = circle.getAttribute('r')*1;
    document.documentElement.addEventListener('keydown',function(evt){
      switch (evt.keyCode){
        case KEY.w:
          circle.setAttribute('cy',y-=moveSpeed);
          // Alternatively:
          // circle.cy.baseVal.value = (y-=moveSpeed);
        break;
        case KEY.s:
          circle.setAttribute('cy',y+=moveSpeed);
        break;
        case KEY.a:
          circle.setAttribute('cx',x-=moveSpeed);
        break;
        case KEY.d:
          circle.setAttribute('cx',x+=moveSpeed);
        break;
      }
    },false);

    var counter = 0;
    var direction = 'down';

    function hover() {
        counter +=1;
        
        if(counter < 50 && direction === 'down') {
            circle.setAttribute('cy',y+=1);
            circle.setAttribute('r',r-=0.1);
            setTimeout(hover, 20)

        } else if(counter < 50 && direction === 'up') {
            circle.setAttribute('cy',y-=1);
            circle.setAttribute('r',r+=0.1);
            setTimeout(hover, 20)

        } else if(counter == 50) {
            if(direction === 'down') {
                direction = 'up';
                counter = 0;

            } else {
                direction = 'down';
                counter = 0;

            }
            setTimeout(hover, 10)
        }
    }
    hover()

  ]]></script>
</svg>

Thank you in advance

Upvotes: 0

Views: 173

Answers (1)

mcernak
mcernak

Reputation: 9130

The <iframe> which contains your svg is too small and the animation is displayed outside of the visible area.
The animation becomes visible when you increase the iframe height, e.g.:

<iframe src="keysaway.svg" frameborder="0" style="height:800px"></iframe>

Upvotes: 1

Related Questions