I successfully animated portions of an SVG logo but the outer edges end up outside of the viewBox when rotating. I've been playing with this for hours but can't figure out how to essentially add "padding" to the inside of the viewBox to give the animations room to complete.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="5px" y="5px" viewBox="0 0 625.1 160" style="enable-background:new 0 0 625.1 160;" xml:space="preserve" class="ccc-gear position-2">
<g class="gear-group">
Here's a fiddle to demo exactly what's happening: https://jsfiddle.net/inhouse/Labrz1vg/13/
Any help is greatly appreciated as I'm certain to run into this with future projects as well!
As I've commented: an easy fix to this problem is adding svg{overflow: visible;} in CSS.
However if this is not working you may want to tweak a little the code.
transform-origin: 13.2% 46.5%;I've changed this to transform-origin: 82.5px 74.5px; since I want it hard coded. I'll change a little the size of the svg, and those percentages won't work any longer. My numbers are a rough approximation. You may want to be sure this is what you need.viewBox to -10 -15 625.1 180. In your code you also have the enable-background with the same values as the viewBox. If you don't need it you may delete it.