CODEWITHSUNDEEP
csssvg
ecclesm
ecclesm

Reputation: 187

Make element of SVG icon rotate on center of start position

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>

Upvotes: 3

Views: 3946

Answers (3)

maioman
maioman

Reputation: 18734

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

Upvotes: 1

wintercounter
wintercounter

Reputation: 7468

From CSS use transform-origin.

transform-origin: center center;

Upvotes: 0

Alvin K.
Alvin K.

Reputation: 4379

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>

Upvotes: 2

Related Questions