Animation Frames [closed] - javascript
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Can anyone help me on as to how frame animation is done using js or css. I am actually trying to achieve the same animation as here .I am puzzled as to how the road animation works. Is it any plugin that does this or simply js and css
I did it as an image (SVG) format.
I animate it with pure HTML5 and CSS3 Animation.
With the class .path and #keyframes.
Unfortunately, Is not supported in IE and safari.
Here is the code:
.line{
width: 65%;
margin: 0 auto;
}
svg{
display: block;
}
#svg path.path{
stroke-dasharray: 3000;
stroke-dashoffset: 4000;
stroke-width: 2;
-webkit-animation:lines 5s linear forwards;
-moz-animation:lines 5s linear forwards;
-ms-animation:lines 5s linear forwards;
-0-animation:lines 5s linear forwards;
animation: lines 5s linear forwards;
}
#keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-webkit-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-moz-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0;}
}
#-ms-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
#-o-keyframes lines {
form { stroke-dashoffset:4000;}
to { stroke-dashoffset: 0; }
}
<div class="line">
<svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
c12.464-36.907,21.327-75.103,35.836-111.202" />
</svg>
</div>
See the code in "Code Pen"
I hope that will help you and welcome to everyone if can edit my code to support it in IE and safari.
Related
Play SVG when entering viewport - Browser Support?
I have the following script that plays my SVGs when they scroll into view (i have several of these SVGs on the page). This works perfectly but only in Firefox! Is this the correct way to do it or is there a better code that will work on other browsers? Ideally, if it can't work on IE, and i am expecting this, then the SVG would just appear like an image and not animated. But i would expect it to work in all other browsers! <div id="arrow-2id" class="arrow-2 leftarrows"> <!--START ARROW 2--> <svg id="arrow2svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 265.009 303.044"> <script type="text/javascript"> var diva2 = document.getElementById("arrow-2id"); window.addEventListener("scroll", function() { if (document.documentElement.scrollTop >= diva2.offsetTop - -500) { diva2.classList.add("play"); } } ); </script> <mask id="arrow2-mask1" maskUnits="userSpaceOnUse"> <path d="M272.304,11.13c-85-31.5-421.5,178.5-175,268.5"/> </mask> <mask id="arrow2-mask2" maskUnits="userSpaceOnUse"> <path d="M-3.696,293.63 c130.667-12.167,130.667,23.5,58.5-89.5"/> </mask> <path mask="url(#arrow2-mask1)" fill="#42A8FC" d="M74.443,277.599c-22.03-9.911-41.892-24.317-56.394-41.811c-32.086-38.702-16.961-81.441,14.377-119.45 c8.258-9.874,27.106-28.748,31.125-32.337C95.94,55.065,133.39,29.76,173.667,13.682c21.596-8.622,49.867-18.374,71.02-11.181 c10.227,3.479,20.322,12.379,20.322,14.696c-0.002,2.317-8.945-0.005-10.693-0.368c-5.762-1.199-13.512-0.332-19.262,0.301 c-22.932,2.51-47.227,13.269-68.383,23.897c-60.319,27.104-104.662,75.694-105.099,75.646 c-12.522,12.951-23.527,26.688-32.052,40.988c-32.137,53.904,3.738,93.021,50.723,109.687 C91.345,270.88,88.917,283.693,74.443,277.599z"/> <path mask="url(#arrow2-mask2)" fill="#42A8FC" d="M74.443,277.599c-20.021,1.14-40.042,2.28-60.062,3.422c-16.744,0.952-18.679,22.91-2.629,21.996 c30.077-1.713,60.152-3.425,90.23-5.14c8.539-0.484,17.633-7.912,13.074-16.089c-13.158-23.591-26.316-47.181-39.471-70.771 c-6.476-11.604-30.8-2.861-23.525,10.185c8.394,15.048,19.787,31.097,28.182,46.146c5.811,8.531,5.436,9.656,5.436,9.656 L74.443,277.599z"/> </svg> <style> .play #arrow2-mask1 path { fill: none; stroke: white; stroke-width: 29; stroke-dasharray: 478.362 478.362; stroke-dashoffset: 0; animation: brush2a 2s linear ; animation-fill-mode: forwards; } .play #arrow2-mask2 path { fill: none; stroke: white; stroke-width: 29; stroke-dasharray: 203.128 203.128; stroke-dashoffset: 0; animation: brush2b 2s linear ; animation-fill-mode: forwards; } #keyframes brush2a { 0% { stroke-dashoffset: 478.362; } 25% { stroke-dashoffset: 478.362; } 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } #keyframes brush2b { 0% { stroke-dashoffset: 203.128; } 80% { stroke-dashoffset: 203.128; } 100% { stroke-dashoffset: 0; } } </style> <!--END ARROW 2--> </div>
How do I make my SVG mobile responsive
I wanted to make a svg animation for a website. But the svg is not mobile responsive. It stretches out of the background and thus making the width of the website go beyond what I intended. I think most likely that I'm doing something wrong with the viewport or width and height but I can't figure out where it's wrong.. Moreover it looks fine on desktop when I minimize the chrome browser to a mobile screen width size but when I actually open in mobile, it doesn't look the same.. Any help would be appreciated. <svg id="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="500" height="150" viewBox="0 0 600 140.63" > <defs> <style type="text/css"> .cls-1{fill:none; stroke:#8B0000;stroke-width:2; stroke-miterlimit:5;} .PhIOtjDr_0{ stroke-dasharray:2948 2950;stroke-dashoffset:2949; animation:PhIOtjDr_draw 6666ms ease-in 0ms forwards; } #keyframes PhIOtjDr_draw { 100%{ stroke-dashoffset:0; } } #keyframes PhIOtjDr_fade { 0%{ stroke-opacity:1; } 97.1830985915493% { stroke-opacity:1; } 100%{ stroke-opacity:0; } } #logo:hover .PhIOtjDr_0{ fill:#8B0000; </style> </defs> <path class="cls-1 PhIOtjDr_0" d="M83.9,93.58H81.26V141a13.39,13.39,0,0,1-2.54,8.45A17.45,17.45,0,0,1,73,154.34a22.66,22.66,0,0,1-6.54,2.34,27.14,27.14,0,0,1-6.2.44,22.94,22.94,0,0,1-5.67-1,41.64,41.64,0,0,1-5-1.9,39.58,39.58,0,0,1-10.16-7l2.73-6.35a11.3,11.3,0,0,0,1.37,1.56q.78.78,2.2,2.1t3.66,3.17a36.14,36.14,0,0,0,5.81,4.15A15.89,15.89,0,0,0,60,153.65a10.6,10.6,0,0,0,4.3-.1,20.7,20.7,0,0,0,4.4-1.66,6.62,6.62,0,0,0,2.88-3.08,9,9,0,0,0,.93-3.76V125.33a36.24,36.24,0,0,1-3,3.22,27.72,27.72,0,0,1-3.81,2.93,38.67,38.67,0,0,1-4.88,2.69,35.31,35.31,0,0,1-5.47,2,20.56,20.56,0,0,1-5.47.78A14.33,14.33,0,0,1,43,135.29a14.88,14.88,0,0,1-5-4,14.47,14.47,0,0,1-2.83-5.76,17.74,17.74,0,0,1-.29-7.18A34.27,34.27,0,0,1,36.92,111a53,53,0,0,1,3.57-7.23q2.1-3.56,4.25-6.89,1.27-2,2.05-3.32H34.57L39.46,85H57.82q-1.76,2.93-3.08,5.27t-2.93,5.27q-1.61,2.93-3.08,5.86a50.48,50.48,0,0,0-4.54,13,24.23,24.23,0,0,0-.24,9.23,5.92,5.92,0,0,0,3,3.81,12,12,0,0,0,7,.78q4.3-.59,10.26-4.59a36.93,36.93,0,0,0,4.59-3.52q2.05-1.85,3.61-3.52V93.58H65.24L70.13,85H88.88Zm44-8.6a6.37,6.37,0,0,1,4.54,1.37q1.42,1.37,1.42,4.49v45.61l-6.25-6.06a28.9,28.9,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.44,25.44,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.46,9.46,0,0,1-1.17-2.44,18.54,18.54,0,0,1-.93-6.35,12.31,12.31,0,0,1,.44-3,12.48,12.48,0,0,1,1.56-3.52,12.82,12.82,0,0,1,2.2-2.54,13.06,13.06,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.21,22.21,0,0,0,4.44-2.1,11.16,11.16,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H94.73L99.62,85Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.6,25.6,0,0,0-3.42,1.51,20.33,20.33,0,0,0-3.27,2.15,18.09,18.09,0,0,0-2.73,2.73,7.88,7.88,0,0,0-1.61,3.37,15.32,15.32,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.84,5.84,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.7,16.7,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.18,26.18,0,0,0,3.13-1.51,23.3,23.3,0,0,0,3.71-2.59,23.69,23.69,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm53.72-18.07a47.61,47.61,0,0,1,4.79,5.71,43.51,43.51,0,0,1,4.35,7.57,36.79,36.79,0,0,1,2.73,9.18,33.44,33.44,0,0,1,0,10.65,38.5,38.5,0,0,1-2.2,8.06,31.4,31.4,0,0,1-3.17,6,25,25,0,0,1-3.76,4.35,23.52,23.52,0,0,1-4.05,3,25.4,25.4,0,0,1-10.26,3.32,30.93,30.93,0,0,0,4.3-2.64,31.77,31.77,0,0,0,3.81-3.37,22.36,22.36,0,0,0,3.52-4.84,43.58,43.58,0,0,0,2.49-5.47,29.41,29.41,0,0,0,1.86-9.77q0-2.44,0-5.18a17.68,17.68,0,0,0-1.66-6.54,27.73,27.73,0,0,0-3.37-5.52,24.91,24.91,0,0,0-3.86-4,10.54,10.54,0,0,0-2.93-1.86l-14.94,9v31.16l-8.79-8.5V93.68h-7.33L145.13,85h11.23V99.83l11.82-9L176,85a11.25,11.25,0,0,1,1.37,1.17Zm25.69-3.74q-.21.56-.42,1.11h.42ZM212.22,73a7.9,7.9,0,0,1,2.8-.49c2.19,0,9.32,2,12.26,2a13.31,13.31,0,0,0,4.75-.76c-1.14,0-3.15-1.56-3.15-6.09s4.84-6.18,4.84-6.18c-1.85,0-10-11.22-10-17.61a12.87,12.87,0,0,1,4.43-9.78c-3.09,0-10.09,2.78-10.09,11.33S223,60.31,223,62.26s-1.13,3.19-3.6,3.19-9.24-3.19-9.24-8.79,3.17-5.11,3.17-11.91S208,27.36,208,27.36s-5.35,10.61-5.35,17.4,3.17,6.31,3.17,11.91c0,4-3.43,6.74-6.3,8a8.11,8.11,0,0,1-2.95.79l-.27,0C194,65.35,193,64.14,193,62.26s4.94-8.34,4.94-16.89-7-11.33-10.09-11.33a12.87,12.87,0,0,1,4.43,9.78c0,6.38-8.13,17.61-10,17.61,0,0,4.84,1.65,4.84,6.18s-2,6.09-3.15,6.09a13.31,13.31,0,0,0,4.75.76c2.5,0,8-1.43,10.94-1.87a9.84,9.84,0,0,1,1.32-.13c2.19,0,4.85.86,4.85,2.95,0,1.1-1.1,5-2.37,8.46V85h-3.22l-4.88,8.6h8.11V118.1a11.2,11.2,0,0,0,.59,3.66,13.42,13.42,0,0,0,2,3.57l2.25,2.78a33.89,33.89,0,0,0,2.34,2.59,41.72,41.72,0,0,0,3.57,3.17,14,14,0,0,0,4.15,2.3,8.81,8.81,0,0,0,4.93.15,9.74,9.74,0,0,0,4.15-2.25,11.71,11.71,0,0,0,2.78-3.91,10.7,10.7,0,0,0,.93-4.83l-8.3-8.3a10.08,10.08,0,0,1-.83,4.88,11.48,11.48,0,0,1-2.88,4,13.59,13.59,0,0,1-2.34,1.71,4.54,4.54,0,0,1-2.64.63,1.75,1.75,0,0,1-1.86-1.66v-33h6l4.88-8.6H213c-.25-.64-.5-1.31-.73-2a38.12,38.12,0,0,1-2.05-7.58A2.74,2.74,0,0,1,212.22,73Zm56.25,12.41a8.92,8.92,0,0,1,4.35,1.56,11.66,11.66,0,0,1,3.32,3.47A14.35,14.35,0,0,1,278,94.85a10.29,10.29,0,0,1,.1,4.44,6.4,6.4,0,0,1-2.1,3.57,7.64,7.64,0,0,1-4.69,1.66,6.11,6.11,0,0,1-3.12-.59,6.69,6.69,0,0,1-2.3-1.86,7.1,7.1,0,0,1-1.32-2.69,6.13,6.13,0,0,1,0-3.08,13.23,13.23,0,0,0-3.17,1.22q-1.81.93-3.86,2.15t-4.1,2.59l-3.81,2.54v31.65l-8.79-8.5V93.68h-7.32L238.39,85h11.23V99.44q2.15-2.54,4.44-5.13a52.52,52.52,0,0,1,4.15-4.25q.78-.68,2-1.51A24,24,0,0,1,262.71,87a18.19,18.19,0,0,1,2.83-1.22A7.62,7.62,0,0,1,268.48,85.38ZM317.59,85a6.37,6.37,0,0,1,4.54,1.37q1.41,1.37,1.42,4.49v45.61l-6.25-6.06a28.89,28.89,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.45,25.45,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.44,9.44,0,0,1-1.17-2.44,18.47,18.47,0,0,1-.93-6.35,12.26,12.26,0,0,1,.44-3,12.46,12.46,0,0,1,1.56-3.52,12.8,12.8,0,0,1,2.2-2.54,13,13,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.2,22.2,0,0,0,4.44-2.1,11.17,11.17,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H284.38l4.88-8.6Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.64,25.64,0,0,0-3.42,1.51,20.29,20.29,0,0,0-3.27,2.15,18,18,0,0,0-2.73,2.73,7.87,7.87,0,0,0-1.61,3.37,15.31,15.31,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.83,5.83,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.69,16.69,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.14,26.14,0,0,0,3.12-1.51,23.28,23.28,0,0,0,3.71-2.59,23.75,23.75,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm43-2.25q1,2.34,2.1,5t2.35,5.37q1.22,2.74,2.44,5.52t2.39,5.23q2.64,6,5.47,11.82h-5.67a6.68,6.68,0,0,1-3.22-1.08,6,6,0,0,1-2.64-2.93q-.88-2-2.1-4.54l-2.49-5.27q-1.27-2.69-2.49-5.23t-2.2-4.49a13.45,13.45,0,0,0-1.42-2.34,2.06,2.06,0,0,0-1.51-.83,4,4,0,0,0-2.1.63,31.09,31.09,0,0,0-3.08,2.05l-.73.54a5.43,5.43,0,0,1-.73.44l-.68.59v22.56l-8.79-8.5V73.27h-1.37a4.09,4.09,0,0,1-3.22-1.32,8.89,8.89,0,0,1-1.76-3,16.23,16.23,0,0,1-.88-4.3h16v42.68l23.34-22.17,5.08,7.42-12.79,9.57a5.55,5.55,0,0,1,.34.59Zm57.81,21.2a7.43,7.43,0,0,1-1.12,4.69,11.36,11.36,0,0,1-3.57,3.47,21.37,21.37,0,0,1-5.08,2.3,31.92,31.92,0,0,1-5.71,1.22,35.46,35.46,0,0,1-5.47.24,17.72,17.72,0,0,1-4.25-.59,19.2,19.2,0,0,1-10.16-7.67q-4.1-5.81-7.23-16.46l.78-2.73q1.27,2.93,2.93,6,1.37,2.54,3.27,5.47a40.31,40.31,0,0,0,4.15,5.37,10.69,10.69,0,0,0,5.47,3.22,18.71,18.71,0,0,0,6.45.44,17.25,17.25,0,0,0,6-1.71,9.88,9.88,0,0,0,4-3.32,4.8,4.8,0,0,0,.59-4.2q-.68-2.25-4.3-4.49-1.86-1.17-3.61-2.15a40.87,40.87,0,0,1-3.76-2.39q-2-1.42-4.44-3.52a66.52,66.52,0,0,1-5.57-5.52,12.34,12.34,0,0,1-3.13-5.76,8.72,8.72,0,0,1,.54-5.42,9.45,9.45,0,0,1,3.81-4.15,14.59,14.59,0,0,1,6.69-2h15.73l-4.88,8.6H391A1.87,1.87,0,0,0,389,94.9a5.22,5.22,0,0,0,.29,3.22,15,15,0,0,0,2.3,4,19.19,19.19,0,0,0,3.86,3.76,43.71,43.71,0,0,0,6.35,3.86,58.21,58.21,0,0,1,6.4,3.71,21.53,21.53,0,0,1,5,4.64A11.84,11.84,0,0,1,415.56,124.64Zm37.36-38.78q5.57-2.25,9-.68t3.47,5.76v45.52l-8.79-8.5V97.29q0-2.54-1.76-3.27t-4.39.73q-1.66.88-3.91,2.15t-4.64,2.69q-2.39,1.42-4.84,2.78l-4.39,2.44v31.65l-8.79-8.5V73.27h-1.27a4.09,4.09,0,0,1-3.22-1.32,8.88,8.88,0,0,1-1.76-3,16.28,16.28,0,0,1-.88-4.3H432.7V99.93l3.61-2.64,3.61-2.69,3.22-2.44q1.47-1.12,2.54-1.9,2-1.37,3.76-2.54A21.35,21.35,0,0,1,452.92,85.87Z"></path> </svg> You can check the result on this test site. Test Site
You can do it like this: * {margin: 0; padding: 0; box-sizing: border-box} svg {width: 500px; height: 150px; max-width: 100%; background: Khaki} .cls-1 {fill: none; stroke: #8B0000; stroke-width: 2; stroke-miterlimit: 5} .PhIOtjDr_0 { stroke-dasharray: 2948 2950; stroke-dashoffset: 2949; animation: PhIOtjDr_draw 6666ms ease-in forwards; } #keyframes PhIOtjDr_draw { 100% {stroke-dashoffset: 0} } #keyframes PhIOtjDr_fade { 0% {stroke-opacity: 1} 97.1830985915493% {stroke-opacity: 1} 100% {stroke-opacity: 0} } #logo:hover .PhIOtjDr_0 { fill: #8B0000; } <svg id="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 600 140.63"> <defs> </defs> <path class="cls-1 PhIOtjDr_0" d="M83.9,93.58H81.26V141a13.39,13.39,0,0,1-2.54,8.45A17.45,17.45,0,0,1,73,154.34a22.66,22.66,0,0,1-6.54,2.34,27.14,27.14,0,0,1-6.2.44,22.94,22.94,0,0,1-5.67-1,41.64,41.64,0,0,1-5-1.9,39.58,39.58,0,0,1-10.16-7l2.73-6.35a11.3,11.3,0,0,0,1.37,1.56q.78.78,2.2,2.1t3.66,3.17a36.14,36.14,0,0,0,5.81,4.15A15.89,15.89,0,0,0,60,153.65a10.6,10.6,0,0,0,4.3-.1,20.7,20.7,0,0,0,4.4-1.66,6.62,6.62,0,0,0,2.88-3.08,9,9,0,0,0,.93-3.76V125.33a36.24,36.24,0,0,1-3,3.22,27.72,27.72,0,0,1-3.81,2.93,38.67,38.67,0,0,1-4.88,2.69,35.31,35.31,0,0,1-5.47,2,20.56,20.56,0,0,1-5.47.78A14.33,14.33,0,0,1,43,135.29a14.88,14.88,0,0,1-5-4,14.47,14.47,0,0,1-2.83-5.76,17.74,17.74,0,0,1-.29-7.18A34.27,34.27,0,0,1,36.92,111a53,53,0,0,1,3.57-7.23q2.1-3.56,4.25-6.89,1.27-2,2.05-3.32H34.57L39.46,85H57.82q-1.76,2.93-3.08,5.27t-2.93,5.27q-1.61,2.93-3.08,5.86a50.48,50.48,0,0,0-4.54,13,24.23,24.23,0,0,0-.24,9.23,5.92,5.92,0,0,0,3,3.81,12,12,0,0,0,7,.78q4.3-.59,10.26-4.59a36.93,36.93,0,0,0,4.59-3.52q2.05-1.85,3.61-3.52V93.58H65.24L70.13,85H88.88Zm44-8.6a6.37,6.37,0,0,1,4.54,1.37q1.42,1.37,1.42,4.49v45.61l-6.25-6.06a28.9,28.9,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.44,25.44,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.46,9.46,0,0,1-1.17-2.44,18.54,18.54,0,0,1-.93-6.35,12.31,12.31,0,0,1,.44-3,12.48,12.48,0,0,1,1.56-3.52,12.82,12.82,0,0,1,2.2-2.54,13.06,13.06,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.21,22.21,0,0,0,4.44-2.1,11.16,11.16,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H94.73L99.62,85Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.6,25.6,0,0,0-3.42,1.51,20.33,20.33,0,0,0-3.27,2.15,18.09,18.09,0,0,0-2.73,2.73,7.88,7.88,0,0,0-1.61,3.37,15.32,15.32,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.84,5.84,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.7,16.7,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.18,26.18,0,0,0,3.13-1.51,23.3,23.3,0,0,0,3.71-2.59,23.69,23.69,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm53.72-18.07a47.61,47.61,0,0,1,4.79,5.71,43.51,43.51,0,0,1,4.35,7.57,36.79,36.79,0,0,1,2.73,9.18,33.44,33.44,0,0,1,0,10.65,38.5,38.5,0,0,1-2.2,8.06,31.4,31.4,0,0,1-3.17,6,25,25,0,0,1-3.76,4.35,23.52,23.52,0,0,1-4.05,3,25.4,25.4,0,0,1-10.26,3.32,30.93,30.93,0,0,0,4.3-2.64,31.77,31.77,0,0,0,3.81-3.37,22.36,22.36,0,0,0,3.52-4.84,43.58,43.58,0,0,0,2.49-5.47,29.41,29.41,0,0,0,1.86-9.77q0-2.44,0-5.18a17.68,17.68,0,0,0-1.66-6.54,27.73,27.73,0,0,0-3.37-5.52,24.91,24.91,0,0,0-3.86-4,10.54,10.54,0,0,0-2.93-1.86l-14.94,9v31.16l-8.79-8.5V93.68h-7.33L145.13,85h11.23V99.83l11.82-9L176,85a11.25,11.25,0,0,1,1.37,1.17Zm25.69-3.74q-.21.56-.42,1.11h.42ZM212.22,73a7.9,7.9,0,0,1,2.8-.49c2.19,0,9.32,2,12.26,2a13.31,13.31,0,0,0,4.75-.76c-1.14,0-3.15-1.56-3.15-6.09s4.84-6.18,4.84-6.18c-1.85,0-10-11.22-10-17.61a12.87,12.87,0,0,1,4.43-9.78c-3.09,0-10.09,2.78-10.09,11.33S223,60.31,223,62.26s-1.13,3.19-3.6,3.19-9.24-3.19-9.24-8.79,3.17-5.11,3.17-11.91S208,27.36,208,27.36s-5.35,10.61-5.35,17.4,3.17,6.31,3.17,11.91c0,4-3.43,6.74-6.3,8a8.11,8.11,0,0,1-2.95.79l-.27,0C194,65.35,193,64.14,193,62.26s4.94-8.34,4.94-16.89-7-11.33-10.09-11.33a12.87,12.87,0,0,1,4.43,9.78c0,6.38-8.13,17.61-10,17.61,0,0,4.84,1.65,4.84,6.18s-2,6.09-3.15,6.09a13.31,13.31,0,0,0,4.75.76c2.5,0,8-1.43,10.94-1.87a9.84,9.84,0,0,1,1.32-.13c2.19,0,4.85.86,4.85,2.95,0,1.1-1.1,5-2.37,8.46V85h-3.22l-4.88,8.6h8.11V118.1a11.2,11.2,0,0,0,.59,3.66,13.42,13.42,0,0,0,2,3.57l2.25,2.78a33.89,33.89,0,0,0,2.34,2.59,41.72,41.72,0,0,0,3.57,3.17,14,14,0,0,0,4.15,2.3,8.81,8.81,0,0,0,4.93.15,9.74,9.74,0,0,0,4.15-2.25,11.71,11.71,0,0,0,2.78-3.91,10.7,10.7,0,0,0,.93-4.83l-8.3-8.3a10.08,10.08,0,0,1-.83,4.88,11.48,11.48,0,0,1-2.88,4,13.59,13.59,0,0,1-2.34,1.71,4.54,4.54,0,0,1-2.64.63,1.75,1.75,0,0,1-1.86-1.66v-33h6l4.88-8.6H213c-.25-.64-.5-1.31-.73-2a38.12,38.12,0,0,1-2.05-7.58A2.74,2.74,0,0,1,212.22,73Zm56.25,12.41a8.92,8.92,0,0,1,4.35,1.56,11.66,11.66,0,0,1,3.32,3.47A14.35,14.35,0,0,1,278,94.85a10.29,10.29,0,0,1,.1,4.44,6.4,6.4,0,0,1-2.1,3.57,7.64,7.64,0,0,1-4.69,1.66,6.11,6.11,0,0,1-3.12-.59,6.69,6.69,0,0,1-2.3-1.86,7.1,7.1,0,0,1-1.32-2.69,6.13,6.13,0,0,1,0-3.08,13.23,13.23,0,0,0-3.17,1.22q-1.81.93-3.86,2.15t-4.1,2.59l-3.81,2.54v31.65l-8.79-8.5V93.68h-7.32L238.39,85h11.23V99.44q2.15-2.54,4.44-5.13a52.52,52.52,0,0,1,4.15-4.25q.78-.68,2-1.51A24,24,0,0,1,262.71,87a18.19,18.19,0,0,1,2.83-1.22A7.62,7.62,0,0,1,268.48,85.38ZM317.59,85a6.37,6.37,0,0,1,4.54,1.37q1.41,1.37,1.42,4.49v45.61l-6.25-6.06a28.89,28.89,0,0,1-6.89,4,30.91,30.91,0,0,1-9.57,2.44,25.45,25.45,0,0,1-10.11-1.07,16.39,16.39,0,0,1-8.5-6.54,9.44,9.44,0,0,1-1.17-2.44,18.47,18.47,0,0,1-.93-6.35,12.26,12.26,0,0,1,.44-3,12.46,12.46,0,0,1,1.56-3.52,12.8,12.8,0,0,1,2.2-2.54,13,13,0,0,1,2.64-1.81q1.41-.73,3-1.42a47.46,47.46,0,0,1,5.52-2.2q2.59-.83,5.62-1.9,1.56-.59,4-1.42a22.2,22.2,0,0,0,4.44-2.1,11.17,11.17,0,0,0,3.27-3,4.31,4.31,0,0,0,.54-4H284.38l4.88-8.6Zm-2.83,20.71-2.44.93q-2,.73-4.3,1.51t-4.49,1.56q-2.15.78-3,1.07a25.64,25.64,0,0,0-3.42,1.51,20.29,20.29,0,0,0-3.27,2.15,18,18,0,0,0-2.73,2.73,7.87,7.87,0,0,0-1.61,3.37,15.31,15.31,0,0,0-.49,6,7.1,7.1,0,0,0,1.51,3.61,5.83,5.83,0,0,0,2.73,1.76,10.31,10.31,0,0,0,3.32.44,16.69,16.69,0,0,0,3.22-.39q1.51-.34,2.39-.63a26.14,26.14,0,0,0,3.12-1.51,23.28,23.28,0,0,0,3.71-2.59,23.75,23.75,0,0,0,3.42-3.57,14.48,14.48,0,0,0,2.34-4.35Zm43-2.25q1,2.34,2.1,5t2.35,5.37q1.22,2.74,2.44,5.52t2.39,5.23q2.64,6,5.47,11.82h-5.67a6.68,6.68,0,0,1-3.22-1.08,6,6,0,0,1-2.64-2.93q-.88-2-2.1-4.54l-2.49-5.27q-1.27-2.69-2.49-5.23t-2.2-4.49a13.45,13.45,0,0,0-1.42-2.34,2.06,2.06,0,0,0-1.51-.83,4,4,0,0,0-2.1.63,31.09,31.09,0,0,0-3.08,2.05l-.73.54a5.43,5.43,0,0,1-.73.44l-.68.59v22.56l-8.79-8.5V73.27h-1.37a4.09,4.09,0,0,1-3.22-1.32,8.89,8.89,0,0,1-1.76-3,16.23,16.23,0,0,1-.88-4.3h16v42.68l23.34-22.17,5.08,7.42-12.79,9.57a5.55,5.55,0,0,1,.34.59Zm57.81,21.2a7.43,7.43,0,0,1-1.12,4.69,11.36,11.36,0,0,1-3.57,3.47,21.37,21.37,0,0,1-5.08,2.3,31.92,31.92,0,0,1-5.71,1.22,35.46,35.46,0,0,1-5.47.24,17.72,17.72,0,0,1-4.25-.59,19.2,19.2,0,0,1-10.16-7.67q-4.1-5.81-7.23-16.46l.78-2.73q1.27,2.93,2.93,6,1.37,2.54,3.27,5.47a40.31,40.31,0,0,0,4.15,5.37,10.69,10.69,0,0,0,5.47,3.22,18.71,18.71,0,0,0,6.45.44,17.25,17.25,0,0,0,6-1.71,9.88,9.88,0,0,0,4-3.32,4.8,4.8,0,0,0,.59-4.2q-.68-2.25-4.3-4.49-1.86-1.17-3.61-2.15a40.87,40.87,0,0,1-3.76-2.39q-2-1.42-4.44-3.52a66.52,66.52,0,0,1-5.57-5.52,12.34,12.34,0,0,1-3.13-5.76,8.72,8.72,0,0,1,.54-5.42,9.45,9.45,0,0,1,3.81-4.15,14.59,14.59,0,0,1,6.69-2h15.73l-4.88,8.6H391A1.87,1.87,0,0,0,389,94.9a5.22,5.22,0,0,0,.29,3.22,15,15,0,0,0,2.3,4,19.19,19.19,0,0,0,3.86,3.76,43.71,43.71,0,0,0,6.35,3.86,58.21,58.21,0,0,1,6.4,3.71,21.53,21.53,0,0,1,5,4.64A11.84,11.84,0,0,1,415.56,124.64Zm37.36-38.78q5.57-2.25,9-.68t3.47,5.76v45.52l-8.79-8.5V97.29q0-2.54-1.76-3.27t-4.39.73q-1.66.88-3.91,2.15t-4.64,2.69q-2.39,1.42-4.84,2.78l-4.39,2.44v31.65l-8.79-8.5V73.27h-1.27a4.09,4.09,0,0,1-3.22-1.32,8.88,8.88,0,0,1-1.76-3,16.28,16.28,0,0,1-.88-4.3H432.7V99.93l3.61-2.64,3.61-2.69,3.22-2.44q1.47-1.12,2.54-1.9,2-1.37,3.76-2.54A21.35,21.35,0,0,1,452.92,85.87Z"></path> </svg> Moved the width and height of the svg element out of the inline styling, added max-width: 100% for responsiveness and some background for easier demonstration.
SVG doesn't fill once the animation is over
My name is Daniel Götz and i'm currently working on my portfolio website but i have a problem. My SVG animation Doesn't fill once it is over. My website : http://20162.hosts.ma-cloud.nl/portfoliowebsite/ If you scroll down to the H1 called: "Mijn skills" You can see the Photoshop logo being animated. But i want to fill once the animation is over. Is there some way i can let it fill once the animation is over? HTML: <div class="photoshop"> <svg id="mySVG" class="finishe" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 486 486"><defs><style>.a{fill:#fff;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>adobesave</title><path class="a" d="M321.27,328.414c-16.269,0-37.082-7.252-47.173-13.307l-9.743,39.2c13.307,7.252,33.866,12.3,56.916,12.3,50.361,0,76.376-24.124,76.376-57.012-.379-25.891-14.412-42.887-47.932-54.333C328.177,247.626,321.4,243.3,321.4,235.044c0-8.988,7.506-14.412,20.813-14.412,15.136,0,30.177,5.8,38.185,10.122l9.714-37.839c-10.817-5.424-29.168-10.091-49.76-10.091-43.58,0-71.676,24.88-71.676,57.644-.379,20.938,13.655,40.774,50.139,52.976,20.432,6.906,25.856,11.194,25.856,20.182C344.668,322.644,337.762,328.414,321.27,328.414Z" transform="translate(0.5 0.5)"/><path class="a" d="M141.687,276.194h0v86.845H87.353V123.446C104.225,120.61,128,118.4,161.489,118.4c33.9,0,58.021,6.4,74.167,19.456,15.64,12.2,25.983,32.417,25.983,56.194,0,23.744-7.881,43.957-22.42,57.643-18.6,17.6-46.417,25.479-78.834,25.479A139.4,139.4,0,0,1,141.687,276.194Zm.1-114.182h0v71.675c4.7,1.011,10.373,1.357,18.257,1.357,29.168,0,47.3-14.758,47.3-39.669-.125-22.3-15.545-35.572-43.01-35.572C153.261,159.8,145.629,160.907,141.782,162.012Z" transform="translate(0.5 0.5)"/><path class="a" d="M0,0V485H485V0ZM455,455H30V30H455Z" transform="translate(0.5 0.5)"/></svg> </div> CSS: .photoshop { height: 100px; width: 100px; opacity: 0; } .js-photoshop-animate{ opacity: 1; } .rzzhgcav_0 { stroke-dasharray: 27046 27048; stroke-dashoffset: 27047; animation: rzzhgcav_draw_0 4000ms ease-in-out 0ms forwards; } #keyframes rzzhgcav_draw_0 { 100% { stroke-dashoffset: 0; } } /* Style */ #mySVG * { fill-opacity: 0; transition: fill-opacity 1s; } #mySVG finished * { fill-opacity: 1; } JAVASCRIPT: var $photoshop = $('.photoshop'); $photoshop.waypoint(function(){ console.log('Waypoint!'); $photoshop.addClass('js-photoshop-animate rzzhgcav_0'); }, {offset: '90%'} ); /* JavaScript */ new Vivus('mySVG', {}, function (obj) { obj.el.classList.add('finished'); });
Include multiple attributes in your animation, leave off the transition: Start and end of the individual property animations can overlap if you leave out the property you want to "run through" a keyframe: If a property is not specified for a keyframe, or is specified but invalid, the animation of that property proceeds as if that keyframe did not exist. .rzzhgcav_0 { stroke-dasharray: 27046 27048; stroke-dashoffset: 27047; animation: rzzhgcav_draw_0 5000ms 0ms forwards; } #keyframes rzzhgcav_draw_0 { 0% { stroke-dashoffset: 27047; fill-opacity: 0 animation-timing-function: ease-in-out } 50% { fill-opacity: 0 animation-timing-function: linear } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1 } }
Somehow disabling /removing hover effect on page load, enabling on click event [closed]
Closed. This question needs debugging details. It is not currently accepting answers. Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question. Closed 7 years ago. Improve this question Besides a lightbox, I also have a special galleri slider (showing 8 photos on the first slide and the rest on the second). In each side, there is an arrow (left and right). They both have an hover effect (standard:opacity 0.5. Hover: 1;) But when we are on slide 1, I dont want left arrow to have the hover effect. When I scroll to slide 2, I want the left arrow to get its hover effect and the right arrow should get the hover effect removed. HTML: <section id="galleriMain_container"> <div id="galleriSectionTitle_container"> <p class="galleriSectionTitle">GALLERI</p> </div> <div id="galleriMiddle_container"> <div id="galleriNavArrowLeft_container"> <svg class="navArrowLeft" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> <g> <path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0 c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744 c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"/> </g> </svg> </div> <div id="galleriesContainer">...</div> <div id="galleriNavArrowRight_container"> <svg class="navArrowRight" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;" xml:space="preserve"> <g> <path d="M97.141,225.92c0-8.095,3.091-16.192,9.259-22.366L300.689,9.27c12.359-12.359,32.397-12.359,44.751,0 c12.354,12.354,12.354,32.388,0,44.748L173.525,225.92l171.903,171.909c12.354,12.354,12.354,32.391,0,44.744 c-12.354,12.365-32.386,12.365-44.745,0l-194.29-194.281C100.226,242.115,97.141,234.018,97.141,225.92z"/> </g> </svg> </div> jQuery: 'use strict'; $(document).ready(function() { $('.navArrowRight').click(function (){ $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000); }); $('.navArrowLeft').click(function (){ $('#galleri_container').animate({'margin-left':'0'}, 1000); }); }); CSS: .navArrowLeft:hover { opacity: 1; transition: opacity 0.4s ease; } .navArrowRight:hover { opacity: 1; transition: opacity 0.4s ease; } .navArrowLeft, .navArrowRight{ margin-top: 235px; cursor: pointer; fill: #4E4E4E; opacity: 0.5; transition: opacity 0.4s ease; } .navArrowRight { -webkit-transform: scaleX(-1); -ms-filter: fliph; filter: fliph; transform: scaleX(-1); float:left; } How can i do this with jQuery? Thanks!
You could simply toggle an hover class for your two arrow. CSS: .hover:hover { opacity: 1; transition: opacity 0.4s ease; } JS: initial page load: $(function(){ $(".navArrowRight").addClass("hover"); }); on page change: $(".navArrowRight").toggleClass("hover"); $(".navArrowLeft").toggleClass("hover"); with this, your code should look like: 'use strict'; $(document).ready(function() { $(".navArrowRight").addClass("hover"); $('.navArrowRight').click(function (){ $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000); $(".navArrowRight").toggleClass("hover"); $(".navArrowLeft").toggleClass("hover"); }); $('.navArrowLeft').click(function (){ $('#galleri_container').animate({'margin-left':'0'}, 1000); $(".navArrowRight").toggleClass("hover"); $(".navArrowLeft").toggleClass("hover"); }); }); UPDATE This won't work with SVG since JQuery has a problem with it. Use this instead with SVG tag: 'use strict'; $(document).ready(function() { $(".navArrowRight").attr("class","navArrowRight hover"); $('.navArrowRight').click(function (){ $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000); toggle(); }); $('.navArrowLeft').click(function (){ $('#galleri_container').animate({'margin-left':'0'}, 1000); toggle(); }); }); function toggle(){ if($(".navArrowRight").attr("class") == "navArrowRight"){ $(".navArrowRight").attr("class","navArrowRight hover"); $(".navArrowLeft").attr("class","navArrowLeft"); } else { $(".navArrowRight").attr("class","navArrowRight"); $(".navArrowLeft").attr("class","navArrowLeft hover"); } }
You can do this with jQuery, but you can also do it with CSS, using nested rules. If you create a CSS class for each slide, then you can have two sets of hover rules, something like: .firstPane .navArrowLeft:hover { opacity: 1; transition: opacity 0.4s ease; } .secondPane .navArrowRight:hover { opacity: 1; transition: opacity 0.4s ease; } Add the classes "firstPane" and "secondPane" to the panes, respectively. That way, the hover effects are applied selectively, depending on which pane you have. You could also use jQuery .addClass() and removeClass(), depending on when each pane is focused
Try this: $(document).ready(function() { var $arrowRight = $('.navArrowRight') , $arrowLeft = $('.navArrowLeft') ; $arrowRight.click(function () { var $this = $(this); $('#galleri_container').animate({'margin-left':'-105.5%'}, 1000, function() { $arrowLeft.removeClass('hover'); $arrowRight.addClass('hover'); }); }); $arrowLeft.click(function () { var $this = $(this); $('#galleri_container').animate({'margin-left':'0'}, 1000, function() { $arrowRight.removeClass('hover'); $arrowLeft.addClass('hover'); }); }); }); For this given CSS: .navArrowLeft.hover:hover { opacity: 1; transition: opacity 0.4s ease; } .navArrowRight.hover:hover { opacity: 1; transition: opacity 0.4s ease; }
SVG and CSS3 Animations not working in IE and Safari
I have this code for animations using HTML5, CSS3 Animations and SVG line. It’s only working in Chrome, Opera and Firefox and not working in IE and Safari. Any solution? Here is the code: .line { width: 65%; margin: 0 auto; } #svg path.path { stroke-dasharray: 3000; stroke-dashoffset: 4000; stroke-width: 2; -webkit-animation: lines 5s linear forwards; -moz-animation: lines 5s linear forwards; -ms-animation: lines 5s linear forwards; -0-animation: lines 5s linear forwards; animation: lines 5s linear forwards; } #keyframes lines { form { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } #-webkit-keyframes lines { form { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } #-moz-keyframes lines { form { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } #-ms-keyframes lines { form { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } #-o-keyframes lines { form { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } <div class="line"> <svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve"> <path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08 c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968 c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177 c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649 c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606 c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943 c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573 c12.464-36.907,21.327-75.103,35.836-111.202" /> </svg> </div> See the code in "Code Pen" I want fix it by making it work in IE and Safari. Please, if possible in HTML5, CSS and SVG only.
Mozilla Devloper Network - SVG Animation - Browser Compatibility says Internet Explorer Not supported Then use FakeSMIL Refer this FakeSmile with IE9 Refer this http://jsfiddle.net/whyoz/c3wb5sbr/ function registerAnimation(anim) { var targets = getTargets(anim); var elAnimators = new Array(); for(var i=0; i<targets.length ;i++) { var target = targets[i]; var animator = new Animator(anim, target, i); animators.push(animator); elAnimators[i] = animator; } anim.animators = elAnimators; var id = anim.getAttribute("id"); if (id) id2anim[id] = anim; for(var i=0; i<elAnimators.length ;i++) elAnimators[i].register(); } var svg = document.getElementsByTagName('svg')[0]; ....... var animation = document.createElementNS( "http://www.w3.org/2000/svg", "animate"); ....... ....... registerAnimation(animation); animation.beginElement(); Which could bring animation for SVG in IE Refer MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx Example http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html