1

I am facing an issue with the transform origin property in firefox and safari. Here is the link what i have done so far : http://jsfiddle.net/Hassanpervaiz/aLfhfstt/ Hers is HTML SVG and CSS code :

.st0{fill:#55B948;}
.st1{fill:none;stroke:#55B948;stroke-miterlimit:10;}
path#small-nid {
  -webkit-animation: spin 4s infinite;
          animation: spin 4s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(8);
          animation-timing-function: steps(8);
}
path#big-nid {
  -webkit-animation: spin 1.5s infinite;
          animation: spin 1.5s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(12);
          animation-timing-function: steps(12);
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
<svg> 
  <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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve"> 
   
  <g id="circle-border">
   <path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
    S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
    S137.265,1,88.833,1z"/>
  </g>
  <path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
   c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
  <path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
   c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
  </svg>
 </svg>

SVG CSS animation. Is there any solution that would be great thank you :)

Abualhassan
  • 61
  • 1
  • 5

1 Answers1

0

Edit:

My first try, using only a translate(x,y) chained to the rotate() obviously only worked for Firefox...
As stated in this answer by daviestar the solution is to wrap each of your pathes into <g>element, and apply the transform on those.

But, strangely enough, the problem he describes isn't the same as in my first answer, maybe because of the transform-origin.

Anyway, here is your working code, with no transform-origin anymore: 

.st0 {
    fill:#55B948;
}
.st1 {
    fill:none;
    stroke:#55B948;
    stroke-miterlimit:10;
}
.niddle-wrapper {
    transform: translate(-15%);
}
path#small-nid {
    -webkit-animation: spin 4s infinite;
    animation: spin 4s infinite;
    -webkit-transform-origin: 89px 88px 0;
    -ms-transform-origin: 89px 88px 0;
    transform-origin: 89px 88px 0;
    -webkit-animation-timing-function: steps(8);
    animation-timing-function: steps(8);
}
path#big-nid {
    -webkit-animation: spin 1.5s infinite;
    animation: spin 1.5s infinite;
    -webkit-transform-origin: 89px 88px 0;
    -ms-transform-origin: 89px 88px 0;
    transform-origin: 89px 88px 0;
    -webkit-animation-timing-function: steps(12);
    animation-timing-function: steps(12);
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
<svg><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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve">
    <g id="circle-border">
        <path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
    S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
    S137.265,1,88.833,1z" />
    </g>
    <g class="niddle-wrapper">
        <path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
   c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z" />
    </g>
    <g class="niddle-wrapper">
        <path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
   c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z" />
    </g>
    </svg></svg>

First Answer

You could add a translate(x, y) into your transform declaration.

.st0{fill:#55B948;}
.st1{fill:none;stroke:#55B948;stroke-miterlimit:10;}
path#small-nid {
  -webkit-animation: spin 4s infinite;
          animation: spin 4s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(8);
          animation-timing-function: steps(8);
}
path#big-nid {
  -webkit-animation: spin 1.5s infinite;
          animation: spin 1.5s infinite;
  -webkit-transform-origin: 89px 88px 0;
      -ms-transform-origin: 89px 88px 0;
          transform-origin: 89px 88px 0;
  -webkit-animation-timing-function: steps(12);
          animation-timing-function: steps(12);
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: translate(-13px,-13px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-13px,-13px) rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: translate(-13px,-13px) rotate(0deg);
            transform: translate(-13px,-13px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-13px,-13px) rotate(359deg);
            transform: translate(-13px,-13px) rotate(359deg);
  }
}
<svg> 
  <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 177.667 177.667" style="enable-background:new 0 0 177.667 177.667;" xml:space="preserve"> 
   
  <g id="circle-border">
   <path class="st0" d="M88.833,177.667C39.851,177.667,0,137.816,0,88.833S39.851,0,88.833,0c48.982,0,88.833,39.851,88.833,88.833
    S137.816,177.667,88.833,177.667z M88.833,1C40.402,1,1,40.402,1,88.833s39.402,87.833,87.833,87.833s87.833-39.402,87.833-87.833
    S137.265,1,88.833,1z"/>
  </g>
  <path id="small-nid" class="st1" d="M88.833,92.333c-1.933,0-3.5-1.567-3.5-3.5l0,0c0-1.933,1.567-3.5,3.5-3.5h35
   c1.933,0,7.313,3.5,9.5,3.5l0,0c0,1.933-7.567,3.5-9.5,3.5H88.833z"/>
  <path id="big-nid" class="st1" d="M92.333,88.833c0,1.933-1.567,3.5-3.5,3.5l0,0c-1.933,0-3.5-1.567-3.5-3.5v-61.75
   c0-1.933,3.5-7.531,3.5-9.5l0,0c1.933,0,3.5,7.567,3.5,9.5V88.833z"/>
  </svg>
 </svg>
Community
  • 1
  • 1
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    Great it works fine on firefox now :) but in chorme it's away from origine not working :( – Abualhassan Apr 28 '15 at 16:08
  • Updated, thanks to daviestar's answer on an [other question](http://stackoverflow.com/questions/18938331/transform-origin-for-css-animation-on-svg-working-in-chrome-not-ff/18943090#18943090). – Kaiido Apr 29 '15 at 00:33