SVG not working in IE9+ - animation
This works in Firefox and Chrome but not IE. The leaf should grow inside the lightbulb. As far as I can tell I'm using the correct prefixes for the keyframes. I have tried adding a -ms keyframe without success. Appreciate any assistance here
The jsfiddle link is here, http://jsfiddle.net/EfLtD/4/
Code is below
<div id="yellow-globe">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve" width="250px" height="250px">
<g id="light-bulb-6-icon_1_">
<path fill="#FFFFFF" d="M-314.3,152.1c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H-314.3z M-326.6,137.7c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H-326.6z M-327.4,123.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L-327.4,123.9L-327.4,123.9z M-298,109.7c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1c-25.5,0-37,18.2-37,35.1c0,12.1,5.6,21.4,11.5,31.3
c5.9,9.9,12,20.1,12.6,33.7h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2
c8.4-7.2,19.7-11.1,31.9-11.1c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5
c-5.6,9.4-10.8,18.2-11.2,28.5L-298,109.7L-298,109.7z M-312.8,109.6c-3.3-14.5-1.4-40.1,6.7-54.6l2.4-4.3l-3.9,3.1
c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7c-1.9,5.3-1.3,10.1-0.7,14.7
c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8L-312.8,109.6L-312.8,109.6z"/>
<path fill="#225650" d="M-311,1.4c11.9,0,23,3.9,31.2,10.9c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36
c-5.5,9.2-10.6,17.9-11.3,28h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1
c-6.9-5.8-16.2-9-26.1-9c-9.9,0-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1
h-7.1c-0.6-10.1-5.8-18.8-11.3-28c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5C-334,5.2-322.9,1.4-311,1.4L-311,1.4
M-295.4,35.5c-1.2,1.6-2.2,3.4-2.9,5.4c-1.9,5.5-1.3,10.4-0.8,15.2c0.5,4.5,1.1,8.7-0.7,13.1c-1.8,4.5-5.6,7.3-10.4,7.8l-1.6,0.2
l-0.2,1.6c-1,9.4,0.2,21.7,2.7,29.9h-2.7c-3-14.4-1.1-39.1,6.8-53.1l4.9-8.7l-7.8,6.1c-5.1,4-9.6,13.2-11.6,21
c-4.1-3.7-5.5-9.6-3.7-16.2c1.6-5.9,5.5-11.4,11-15.4C-307.7,38.6-301.8,36.3-295.4,35.5 M-294.7,118.7c0.6,0,1.2,0.2,1.6,0.7
c0.2,0.3,0.5,0.7,0.5,1.4l0,0v0c0,1.1-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1c0-1.1,1-2.1,2.1-2.1L-294.7,118.7 M-295.4,132.5
c1.2,0,2.1,0.9,2.1,2.1c0,1.1-1,2.1-2.1,2.1h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1H-295.4 M-300.9,146.1
c-0.2,0.2-0.3,0.3-0.5,0.5c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3H-300.9 M-311-0.6
c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66c0-22.8,18-34.1,36-34.1S-275,22-275,44.7
c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C-263.8,14.5-287.4-0.6-311-0.6L-311-0.6z M-289.6,33.1
c-33.2,0-46.5,33.8-28.9,44.2c1.5-8.4,6.5-18.9,11.5-22.8c-8.3,14.8-10.3,41.2-6.6,56.1h7.1c-3.1-8-4.5-21.8-3.5-31.7
c5-0.5,9.8-3.4,12.1-9c3.9-9.7-2.1-18.1,1.5-28.4C-295.1,37.7-292.7,34.9-289.6,33.1L-289.6,33.1z M-294.7,116.7h-32.7
c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1C-290.5,118.5-292.4,116.7-294.7,116.7L-294.7,116.7z
M-295.4,130.5h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C-291.3,132.3-293.1,130.5-295.4,130.5L-295.4,130.5z M-295.7,144.1h-30.7c8.1,7.5,8.9,9,12.1,9h6.2
C-304.9,153.1-304.2,151.7-295.7,144.1L-295.7,144.1z"/>
</g>
<g>
<path fill="#F9E46E" class="yellow" d="M89.5,93.2c0,24.3,23.5,38,24.1,66h24c0-27.3,24-41.7,24-66C161.6,47.7,89.5,47.7,89.5,93.2z"/>
</g>
<g id="light-bulb-6-icon_37_">
<path fill="#FFFFFF" d="M122.2,200.9c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H122.2z M109.9,186.5c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H109.9z M109.1,172.7c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L109.1,172.7L109.1,172.7z M138.6,158.5c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1S88.4,76.6,88.4,93.5c0,12.1,5.6,21.4,11.5,31.3c5.9,9.9,12,20.1,12.6,33.7
h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2c8.4-7.2,19.7-11.1,31.9-11.1
c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5c-5.6,9.4-10.8,18.2-11.2,28.5L138.6,158.5
L138.6,158.5z"/>
<path fill="#225650" d="M122.3,201.9h6.2c3.2,0,3.9-1.4,12.4-9h-30.7C118.3,200.4,119,201.9,122.3,201.9z M135.2,195.3
c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3h20.5C135.5,195,135.3,195.2,135.2,195.3z"/>
<path fill="#225650"d="M141.1,179.3h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C145.2,181.1,143.4,179.3,141.1,179.3z M141.1,185.5h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1h31.2c1.2,0,2.1,0.9,2.1,2.1
C143.2,184.5,142.3,185.5,141.1,185.5z"/>
<path fill="#225650" d="M125.5,48.1c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66
c0-22.8,18-34.1,36.1-34.1s36,11.4,36,34.1c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C172.8,63.2,149.1,48.1,125.5,48.1z
M146.6,157.5h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1c-6.9-5.8-16.2-9-26.1-9
s-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1h-7.1c-0.6-10.1-5.8-18.8-11.3-28
c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5c8.2-7,19.3-10.9,31.2-10.9c11.9,0,23,3.9,31.2,10.9
c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36C152.4,138.6,147.2,147.3,146.6,157.5z"/>
<path fill="#225650" d="M141.8,165.5h-32.7c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1
C146,167.3,144.1,165.5,141.8,165.5z M143.9,169.5L143.9,169.5c0,1.2-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1
c0-1.1,1-2.1,2.1-2.1h32.7v0c0.6,0,1.2,0.2,1.6,0.7C143.7,168.4,144,168.8,143.9,169.5L143.9,169.5z"/>
</g>
<path fill="#FFFFFF" class="leaf" stroke="#225650" stroke-width="2" stroke-miterlimit="10" d="M121.8,158.6c-3.3-14.5-1.4-40.1,6.7-54.6
l2.4-4.3l-3.9,3.1c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7
c-1.9,5.3-1.3,10.1-0.7,14.7c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8
L121.8,158.6L121.8,158.6z"/>
</svg>
<h3 id="yellow-header">loading...</h3>
</div>
css
#yellow-globe {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
}
#keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
#-webkit-keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
.yellow {
fill: yellow;
-webkit-animation: yellow 1s infinite;
animation: yellow 1s infinite;
}
.leaf {
stroke-dasharray: 242;
stroke-dashoffset: 242;
-webkit-animation: dash 4s linear alternate 1;
animation: dash 4s linear alternate 1;
}
#yellow-header {
text-align: center;
color: #377F72;
font-family:'Futura Book'
}
#keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}
#-webkit-keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}
Related
Problem with transform-box: fill-box and firefox
I am facing a problem with an svg file in firefox which I was able to boil down to the following code (the original image had a couple of thousend lines of code):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70">
<style type="text/css"><![CDATA[
.sun {
transform-box: fill-box;
animation-name: sun-spoke-rotate;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
.sun path {
transform-box: fill-box;
animation-name: sun-spoke-scale;
transform-origin: 50%;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g class="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
</g>
</g>
This works as expected in chrome and the newest version of edge. It of course doesn't work at all in Internet Explorer but what really bothers me is that I also has issues in firefox. It works well --- until I start moving the mouse??!! Then it starts to jump all over the place. I figured it has something to do with the transform-box: fill-box. Any ideas?
Replace 50% in transform-origin with the coordinates of the center of rotation in pixels
You can get the coordinates of the center of rotation using the Javascript getBBox() method
The property transform-box: fill-box; in this case must be removed from the CSS rules
// Calculating the center of rotation
let bb = sun.getBBox();
console.log(bb.x + bb.width / 2);
console.log(bb.y + bb.height / 2);
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 15 70 70" style="border:1px solid;">
<style type="text/css"><![CDATA[
#sun {
animation-name: sun-spoke-rotate;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 6s;
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#sun path {
animation-name: sun-spoke-scale;
transform-origin: 58.03px 41.61px;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 6s;
}
#keyframes sun-spoke-scale {
0% { transform: scale(1,1) }
100% { transform: scale(.5,.5) }
}
#keyframes sun-spoke-rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
]]></style>
<g class="cloud">
<g id="sun">
<path
d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,
2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"/>
<path
d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,
0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"/>
<path
d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,
0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"/>
<path
d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,
0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"/>
<circle
style="paint-order: stroke; fill: #f0daba; stroke: #4a4f55; stroke-width: 8px"
cx="58.033"
cy="41.612"
r="7.999"/>
<circle
</g>
</g>
SVG Circle not animated in Edge
The below svg animates perfectly in all browsers but Edge (surprise!). <svg width="80" height="24" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#555"> <circle cx="15" cy="15" r="15"> <animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /> <animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /> </circle> </svg> I tried adding px as units but no luck. Thanks for your tips!
I try to check your code and refer to the MDN documentation. I can see that you are using animate, attributeName, from, to, dur attributes in your code. Animate is supported in Edge version <=79. Whereas compatibility is unknown for attributeName, from, to, dur Reference: SVG Animate I think this is the reason why your code is not working in the MS edge legacy browser. I suggest you recommend your clients use the MS Edge Chromium browser or you can remove the animation or show the image in place of animation to avoid the issue.
After reading the comments and answers I decided to go for clear CSS animation, instead of SVG. I grabbed the code from https://projects.lukehaas.me/css-loaders/ and my "solution" looks like this:
<style>
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.2em;
height: 2.2em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.3s infinite ease-in-out;
animation: load7 1.3s infinite ease-in-out;
}
.loader {
color: #888;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
#-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
#keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.2em 0 -1.3em;
}
40% {
box-shadow: 0 2.2em 0 0;
}
}
</style>
<div class="loader">Loading...</div>
Animate calligraphy using image-file instead of SVG
I am creating animated calligraphy using the stroke-dashoffset technique, applying the stroke as an animated mask on top of an SVG. This works on most browsers, but I would like to apply the same mask on top of a PNG instead. That way, even if the browser has trouble with both SVG and mask (IE...), at least it will just display the PNG as-is.
Here is a codepen of the working calligraphy with pure SVG:
https://codepen.io/benviatte/pen/PMzmYB
Here is the codepen of the non-working calligraphy where I put an image instead of the base SVG. It just displays blank, unless I remove the "mask-image" property, in which case it doesn't animate:
https://codepen.io/benviatte/pen/eqzWzJ
Finally, here is the code of the PNG version that just displays blank:
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</svg>
<img src="http://thehermitcrab.org/imgs/S2.png"/>
CSS:
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 1s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
img, svg{
width: 300px;
position: absolute;
top: 0;
left: 0;
}
img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
Thank you so much!!!
You can fill the masked path with an image like so:
I hope this is what you were asking.
mask path {
fill: none;
stroke: white;
stroke-width: 22;
stroke-dasharray: 237 237;
stroke-dashoffset: 237;
animation: brush 5s cubic-bezier(.6,.3,.3,.9);
animation-fill-mode: forwards;
}
#keyframes brush {
0% { stroke-dashoffset: 237; }
20% { stroke-dashoffset: 237; }
80% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0; }
}
svg {
width: 300px;
height: 300px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.33071 248.03149">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="0" y="0" width="100" height="100" />
</pattern>
<mask id="mask" maskUnits="userSpaceOnUse">
<path d="M 92.81613,118.88531 C 92.79077,113.54067 89.77774,108.7899 89.336626,103.42689 96.06007,89.146492 85.818314,62.350762 62.06357,80.661632 c -5.787226,7.87329 -12.023557,16.43904 -12.784729,26.500038 -0.404099,5.34115 3.084547,9.85663 7.361464,12.76814 9.170344,6.24271 20.057653,10.0779 27.888503,18.14154 4.373535,4.50356 2.810446,11.25662 2.004789,16.78827 -1.093846,7.51033 -10.89645,19.36241 -18.314927,21.84098 -9.433311,3.81749 -18.936726,-10.31651 -25.709437,-30.06406" />
</mask>
</defs>
<path mask="url(#mask)" fill="url(#img)" d="m 84.347106,72.730822 c -6.700057,0.41349 -13.536192,0.895 -20.004337,2.74122 -8.269143,3.35101 -15.144649,10.28592 -18.335113,18.62393 -1.745059,4.7139 -2.424554,9.829858 -1.055133,14.737138 0.971246,7.85177 6.591277,14.03623 12.594733,18.68723 4.899213,3.10976 10.516595,4.80935 15.88174,6.85728 3.598383,2.16843 7.853428,4.63947 9.276845,8.8059 0.995595,7.43174 -3.283258,14.41911 -7.577125,20.14167 -2.859338,3.25041 -7.082956,5.7682 -11.428016,6.06759 -2.76877,-0.88985 -4.676886,-3.50515 -6.467732,-5.66664 -0.8438,-2.84582 -0.503218,-6.25249 -2.88424,-8.50648 -2.356943,-2.51972 -6.848373,-3.89583 -9.901785,-1.90687 -1.783614,1.60567 -1.978665,4.29248 -0.431156,6.14634 0.628015,2.58248 4.330039,1.06794 4.996601,3.36938 -0.140661,3.29536 -3.415289,5.93264 -3.011822,9.2671 1.471965,3.46591 3.011956,7.79888 7.009623,8.93583 2.779476,2.56577 6.811098,1.17952 10.184223,1.15628 7.753544,-0.82418 15.439311,-4.27064 20.776362,-10.01337 3.918376,-5.23506 6.686713,-11.29125 9.19183,-17.29292 0.679648,-4.33031 0.214675,-8.76706 0.319579,-13.12674 -4.685098,-7.44203 -12.013326,-12.8652 -20.16128,-15.99596 -4.833407,-2.57162 -11.582728,-2.85294 -14.441374,-8.15604 -4.638062,-7.39166 -5.929022,-17.810038 -0.40541,-25.114328 3.085422,-4.36163 7.883758,-8.71782 13.633176,-8.01843 4.028691,-0.21996 8.250498,0.0932 11.561718,2.63603 2.904262,1.44386 1.746882,5.41774 0.879004,7.79388 -2.021102,4.66617 -3.832398,9.978878 -2.737189,15.088588 0.62468,1.45971 1.572558,3.02113 2.790336,3.97665 2.563411,1.00256 5.41245,0.65028 7.526616,-1.1464 2.393394,-1.33047 7.187979,-2.70727 6.367699,-6.21466 -1.29931,-1.67133 -4.660058,0.16306 -5.006198,-2.59652 -0.718456,-6.014858 3.485958,-11.212508 3.846428,-17.152098 0.2919,-3.79706 1.28679,-8.45196 -1.339374,-11.64839 -3.199638,-2.55035 -7.777181,-2.43209 -11.649229,-2.47619 z" />
</svg>
SVG animation / dirty path
Could anybody explain me how to remove a point in my path and why did it come from?
window.onload =function(){
var myHeart = $("#Heart");
var current = 0;
var PathTail_MainPath = $("#PathTail_MainPath");
var tailMainPath = $("#tailMainPath");
myHeart.click(function () {
if (current++ % 2 == 0) {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("one");
} else {
PathTail_MainPath.toggleClass("tailMainPath tailMainPathReturn");
tailMainPath.toggleClass("tailMainPath tailMainPathReturn");
console.log("two");
}
});
};
#Heart {
width: 600px;
border: 1px solid #000;
cursor: pointer;
}
#Heart .tailMainPath {
-webkit-animation: tailStroke 500ms linear;
animation: tailStroke 500ms linear;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#Heart .tailMainPathReturn {
-webkit-animation: tailStrokeReturn 500ms linear 125ms;
animation: tailStrokeReturn 500ms linear 125ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#keyframes tailStroke {
0% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
}
#-webkit-keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 150 0;
stroke-dashoffset: 150;
}
100% {
stroke-dasharray: 0 150;
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Heart" class="moving" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 320" style="enable-background:new 0 0 450 320;" xml:space="preserve">
<defs>
<path id="PathTail_MainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
<path id="tailMainPath" class="tailMainPathReturn" d="M296.2,253.9l9.1-3.8l8,0.2c2.5,0.5,8.3,1.6,10.9,6.5c3.9,7.5,0.6,18.3-4.3,24.9
c-0.8,1.1-7.5,10.2-19.4,9.5c-9-0.5-13.8-4.1-18.6-8.1c-5.2-4.3-7.6-9.6-12.4-16.9c-3.7-5.7-6.9-13.5-16-22.4"/>
</defs>
<use xlink:href="#PathTail_MainPath" fill="none"; stroke="#000" stroke-width="11"/>
<use xlink:href="#tailMainPath" fill="none"; stroke="#A50808" stroke-linecap="round" stroke-width="9"/>
</svg>
PS This code doesn't work on code generator stackoverflow's.(I don't know why) That why I made copy here https://jsfiddle.net/BlackStar1991/ea6255h1/
The dirty dot is caused by "0 length" sub path with rounded line cap. When value of stroke-dashoffset is 0, the path is split by [0, 150]. So it has "0 length" sub path.
To solve this problem, you can offset the start point of line dash a bit.
#keyframes tailStroke {
0% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
100% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
}
#keyframes tailStrokeReturn {
0% {
stroke-dasharray: 151 0;
stroke-dashoffset: 151;
}
100% {
stroke-dasharray: 0 151;
stroke-dashoffset: 1;
}
}
Animating SVG in IE 11+
I've been trying to animate this heart SVG and this codepen seems to work fine in chrome, firefox, and safari on Mac but in IE 11+ I can't seem to find a resolution anywhere.
All I need it to do is to fade in, grow, and fade out but IE doesn't seem to scale up in the keyframe no matter what I try.
Thanks in advance!
<svg version="1.1" class="svg-pulse" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 42.7" enable-background="new 0 0 60 42.7" xml:space="preserve">
.svg-pulse { width: 100vw; height: 100vh; }
#-webkit-keyframes svg_pulse { 0% {
radius: 10;
transform-origin: center center;
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
transform-origin: center center;
transform: scale(.8);
opacity: 0; } }
#keyframes svg_pulse { 0% { /* radius: 5; */
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.1);
transform: scale(.1);
opacity: 0; } 25% {
opacity: .1; } 50% {
opacity: .1; } 100% {
-ms-transform-origin: center center;
transform-origin: center center;
-ms-transform: scale(.8);
transform: scale(.8);
opacity: 0; } }
.svg-pulse .pulse { animation: svg_pulse 6s ease; animation-iteration-count: infinite; fill: hotpink; }
.svg-pulse .two { opacity: 0; animation-delay: 1.5s; }
.svg-pulse .three { opacity: 0; animation-delay: 3s; }
.svg-pulse .four { opacity: 0; animation-delay: 4.5s; }
Msdn_svg Even according to Microsoft simple SVG animation does not work on Internet Explorer, without the addition of JavaScript. [MSDN_SVG_animationGuide][1] This is in agreement with my own experience.