Make element of SVG icon rotate on center of start position

Question

I have a SVG icon that I've split into separate sections using CSS classes (split into a phone, and a circle border). I want a rotate transform applied to the one element. Currently the element rotates on an axis in the top left, (I believe this must be (0,0) of the SVG), I'd like it to rotate on the center of the one element - essentially spining on the spot within the other element. I haven't been able to get transform-origin to work. Is there a way to do this?

HTML

.phone-us{
 width: 96px;
    height: 96px;
    margin: 0 auto;
    display: block;
 margin: 0 auto;
    display: block;
}

.phone-icon{
transform:translate(-549.9px, -168px);
}

@keyframes rotate {
    100% {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

        <svg class="phone-us" id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="121.42mm" width="121.42mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 430.21731 430.21731">
         <metadata id="metadata7">
          <rdf:RDF>
           <cc:Work rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
            <dc:title/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1" transform="translate(-4.8913 -316.68)">
          <g transform="translate(4.8913 316.68)">
          <g class="keepRotatingOne">
            <path  class="phone-icon" id="path3" d="m337.48 601.2-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" transform="translate(-4.8913 -316.68)"/>
            </g>
          </g>
          <circle id="path4700" cx="220" stroke="#489648" cy="531.79" r="200" stroke-width="30.217" fill="none"/>
         </g>
        </svg>

you could try transform-origin but be careful because Chrome's implementation is not spec compliant, though arguably it does correspond more closely to what people expect. — Robert Longson, Apr 14 '16 at 14:56
Possible duplicate of [Circular animation not working on SVG](http://stackoverflow.com/questions/36021867/circular-animation-not-working-on-svg) — L777, Apr 14 '16 at 15:05
Thanks freestock, I have now tried the solution in the answer you linked to. I have wrapped the svg in new elements, trying to use translate to center the element, with no success. It seems like no matter where I get the origin point, the element will always rotate a certain radial distance away for that point, making it so I cannot make the icon rotate on the spot. I have edited my code to reflect the changes I made — ecclesm, Apr 15 '16 at 01:07

score 2 · Accepted Answer · answered Apr 15 '16 at 07:59

This is my take on your animation. The entire animation is wrapped in <g transform=... to move it to the desired position (though I recommend wrapping it around a <div> and moving it instead). A single-liner <animate... replaces all the CSS coding.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600" preserveAspectRatio="none" style="width:300; height:300; top:0; left:0;">
<g transform="scale(0.5) translate(400,0)">
    <g>
        <path  class="phone-icon" id="path3" d="m337.48 601.2-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" transform="translate(-4.8913 -316.68)"/>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 220 220" to="360 220 220" dur="3s" repeatCount="indefinite" />
    </g>
    <circle cx="220" cy="220" r="200" fill="none" stroke="#489648" stroke-width="30"></circle>
</g>
</svg>

score 1 · Answer 2 · answered Apr 15 '16 at 08:05

if you center your path and circle element with the origin you don't need to transform origin of animation,

then you can use the viewbox attribute to move the elements around:

.phone-us{
 width: 96px;
    height: 96px;
    margin: 0 auto;
    display: block;
 margin: 0 auto;
    display: block;
}

/*.phone-icon{
transform:translate(-549.9px, -168px);
}*/

@keyframes rotate {
    100% {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
  }
}

.keepRotatingOne {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

        <svg class="phone-us" id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="121.42mm" width="121.42mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="-215.1 -215.1   430.21731 430.21731">
         <metadata id="metadata7">
          <rdf:RDF>
           <cc:Work rdf:about="">
            <dc:format>image/svg+xml</dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
            <dc:title/>
           </cc:Work>
          </rdf:RDF>
         </metadata>
         <g id="layer1"> <!--transform="translate(-4.8913 -316.68)"-->
          <g><!--transform="translate(4.8913 316.68)"-->
          <g class="keepRotatingOne">
            <path  class="phone-icon" id="path3" d="m117.48 70-1.1628-3.5036c-2.754-8.1856-11.781-16.723-20.074-18.972l-30.692-8.3844c-8.3232-2.2644-20.196 0.78042-26.286 6.8696l-11.108 11.108c-40.369-10.909-72.025-42.565-82.918-82.926l11.108-11.108c6.0896-6.0896 9.134-17.947 6.8696-26.27l-8.3692-30.707c-2.2644-8.308-10.817-17.335-18.987-20.058l-3.5036-1.178c-8.1856-2.7236-19.86 0.0308-25.949 6.12l-16.616 16.631c-2.9684 2.9528-4.8656 11.398-4.8656 11.429-0.58116 52.754 20.104 103.58 57.421 140.9 37.225 37.225 87.86 57.88 140.46 57.436 0.27565 0 8.966-1.8668 11.934-4.8196l16.616-16.616c6.0892-6.0892 8.8432-17.763 6.12-25.949z" fill="#489648" /><!--transform="translate(-4.8913 -316.68)"-->
            </g>
          </g>
          <circle id="path4700" cx="0" stroke="#489648" cy="0" r="200" stroke-width="30.217" fill="none"/>
         </g>
        </svg>

I moved the path.phone-icon only changing the starting m command so it might not be perfectly positioned.

pen

score 0 · Answer 3 · answered Apr 15 '16 at 08:02

0

From CSS use transform-origin.

transform-origin: center center;

answered Apr 15 '16 at 08:02

wintercounter

7,500
6
32
46

Make element of SVG icon rotate on center of start position

3 Answers3

pen