Recently we have updated our SVG logo image to rotate around its own center:
here is how it can be implemented:
Each of the cogs are SGV path elements, i.e.
<svg enable-background="new 0 0 75 75" height="91px" id="Layer_1" version="1.1" viewBox="0 0 100 100" width="65px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g>
<path id="logo-circle1" d="M51.895,63.339c0-1.01-0.098-1.996-0.244-2.961l7.139-4.129l-7.402-12.813l-7.131,4.119 c-1.539-1.232-3.271-2.229-5.135-2.969v-8.234H24.324v8.234c-1.789,0.709-3.455,1.668-4.955,2.828l-7.088-4.203L4.744,55.948 l7.084,4.197c-0.164,1.041-0.273,2.105-0.273,3.193c0,1.008,0.094,1.996,0.24,2.965l-7.137,4.123l7.398,12.813l7.133-4.117 c1.539,1.229,3.275,2.229,5.135,2.969v8.232h14.797v-8.232c1.791-0.707,3.455-1.662,4.955-2.832l7.084,4.203l7.549-12.734 l-7.092-4.199C51.783,65.489,51.895,64.425,51.895,63.339 M31.72,73.188c-5.43,0-9.85-4.418-9.85-9.85 c0-5.434,4.42-9.854,9.85-9.854c5.434,0,9.854,4.42,9.854,9.854C41.574,68.771,37.154,73.188,31.72,73.188" fill="#547ca0">
</path>we need to insert animateTransform element inside the path element to make the actual animation, so the updated code should be:
<path id="logo-circle1" d="M51.895,63.339c0-1.01-0.098-1.996-0.244-2.961l7.139-4.129l-7.402-12.813l-7.131,4.119 c-1.539-1.232-3.271-2.229-5.135-2.969v-8.234H24.324v8.234c-1.789,0.709-3.455,1.668-4.955,2.828l-7.088-4.203L4.744,55.948 l7.084,4.197c-0.164,1.041-0.273,2.105-0.273,3.193c0,1.008,0.094,1.996,0.24,2.965l-7.137,4.123l7.398,12.813l7.133-4.117 c1.539,1.229,3.275,2.229,5.135,2.969v8.232h14.797v-8.232c1.791-0.707,3.455-1.662,4.955-2.832l7.084,4.203l7.549-12.734 l-7.092-4.199C51.783,65.489,51.895,64.425,51.895,63.339 M31.72,73.188c-5.43,0-9.85-4.418-9.85-9.85 c0-5.434,4.42-9.854,9.85-9.854c5.434,0,9.854,4.42,9.854,9.854C41.574,68.771,37.154,73.188,31.72,73.188" fill="#547ca0">
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 31.723999977111816 63.337501525878906"
to="360 31.723999977111816 63.337501525878906"
dur="10s"
repeatCount="indefinite"/>
</path>The key attributes are from and to. The first values are ‘0’ and ‘360’. These are degrees we set for the image to be rotated. The next values are ‘x’ and ‘y’ coordinates. We need to calculate them properly – the center of image.
Here is a trick how to calculate them:
in Browser console, execute the following code:
document.getElementById('logo-circle1').getBBox()The above will return x, y, width and height of the path element. Then you can calculate the center of image (used in ‘from’ and ‘to’ values by:
centerX = x + (width/2)
centerY = y + (heigth/2)
Then you need to set:
from=”0 centerX centerY”
to=”360 centerX centerY”