I am working on an small SVG animation (SVG downloaded from here). I managed to get it working just fine in Google Chrome (version 21.0.1180.89 m), but not in any other browser (Including Safari – which I find weird since both are using Webkit). I am using CSS3 for animation. Below is the code – any help on this is most appreciated.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="radar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<style>
#signal{
position:absolute;
left:150px;
top:150px;
transform-origin:150px 150px;
-webkit-transform-origin:150px 150px;
-moz-transform-origin:150px 150px;
-o-transform-origin:150px 150px;
animation:signal 4s linear infinite;
-webkit-animation:signal 4s linear infinite;
-moz-animation:signal 4s linear infinite;
-o-animation:signal 4s linear infinite;
}
@keyframes signal{
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
@-webkit-keyframes signal{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes signal{
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(-360deg);}
}
@-o-keyframes signal{
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(-360deg);}
}
.planet{
position:absolute;
left:150px;
top:150px;
padding:20px;
transform-origin:150px 150px;
-webkit-transform-origin:150px 150px;
-moz-transform-origin:150px 150px;
-o-transform-origin:150px 150px;
transition-duration:10s;
-webkit-transition-duration:10s;
-moz-transition-duration:10s;
-o-transition-duration:10s;
transition-property:width, height, transform;
-webkit-transition-property:width, height, transform;
-moz-transition-property:width, height, transform;
-o-transition-property:width, height, transform;
}
.planet:hover{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition-duration:2s;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;
}
</style>
<circle class="planet" fill="#000" cx="174.1" cy="58.092" r="7.881"/>
<circle class="planet" fill="#000" cx="130.281" cy="112.11" r="6.723"/>
<circle class="planet" fill="#000" cx="60.732" cy="99.822" r="12.285"/>
<path fill="#000" d="M150,0C67.157,0,0,67.157,0,150s67.157,150,150,150s150-67.157,150-150S232.843,0,150,0z M278.968,147.334
H226.37c-1.373-39.98-33.434-72.152-73.37-73.696V21.037c33.334,0.755,64.561,14.09,88.217,37.747
C264.952,82.519,278.294,113.875,278.968,147.334z M147,147.334H79.63c1.371-36.61,30.803-66.154,67.37-67.695V147.334z
M147,153.334v67.027c-36.345-1.532-65.652-30.725-67.353-67.027H147z M153,153.334h67.353c-1.7,36.303-31.007,65.495-67.353,67.027
V153.334z M153,147.334V79.639c36.567,1.542,65.998,31.085,67.37,67.695H153z M58.783,58.783
C82.439,35.127,113.666,21.792,147,21.037v52.602c-39.937,1.544-71.997,33.715-73.37,73.696H21.032
C21.707,113.875,35.048,82.519,58.783,58.783z M21.043,153.334h52.604c1.704,39.671,33.638,71.492,73.353,73.027v52.603
c-33.334-0.756-64.561-14.091-88.217-37.747C35.206,217.639,21.88,186.542,21.043,153.334z M241.217,241.217
c-23.656,23.656-54.883,36.991-88.217,37.747v-52.603c39.715-1.535,71.648-33.356,73.354-73.027h52.604
C278.12,186.542,264.795,217.639,241.217,241.217z"/>
<path id="signal" fill="#000" d="M149.444,159.059c-2.175,0-4.351-0.83-6.01-2.489c-3.319-3.319-3.32-8.701,0-12.021l73.721-73.727
c3.32-3.319,8.702-3.32,12.021,0c3.32,3.319,3.32,8.701,0.001,12.021l-73.721,73.727
C153.795,158.229,151.62,159.059,149.444,159.059z"/>
</svg>
Thank you,
Ian
You’re on the bleeding edge currently, Chrome 21 was released on August 29, 2012. Firefox 16 which will be coming out on October 9th, 2012 supports this. I imagine Safari will support it at some point but it’s on a lower frequency release schedule than Firefox/Chrome.