SVG reverse drawing css animation cross-browsers - html

Question

I'm fighting with CSS SVG animations and I found the problem which I cannot overcome. My animation works properly in Chrome, Opera and Firefox but Safari has a problem with it - inside circles should draw itself anticlockwise.
Anyone know how to solve this?
Thanks!
.padding {
padding-left: 20px;
padding-right: 20px;
background-color: grey;
}
svg .cog-one,
svg .cog-two {
stroke-dasharray: 390;
stroke-dashoffset: 390;
transition: all 1s linear;
}
svg .circle-one {
stroke-dasharray: 100%;
stroke-dashoffset: -100%;
transition: all .6s linear .3s;
}
svg .cog-two {
transition-delay: .3s;
}
svg .circle-two {
stroke-dasharray: 100%;
stroke-dashoffset: -100%;
transition: all .6s linear .6s;
}
svg:hover .cog-one,
svg:hover .cog-two {
stroke-dashoffset: 0;
}
svg:hover .circle-two {
stroke-dashoffset: 0%;
}
svg:hover .circle-one {
stroke-dashoffset: 0%;
}
<svg width="250" height="250" viewbox="0 0 162.95 117.37" class="padding">
<path fill="none" stroke="#231f20" stroke-width="5.5" d="M2331.44,513.63a0.3,0.3,0,0,1-.4,0l-9.58-7.17-1.23.61a35.5,35.5,0,0,1-4.16,1.73l-1.3.44-1.7,11.91a0.31,0.31,0,0,1-.09.18,0.32,0.32,0,0,1-.23.09h-16.1a0.32,0.32,0,0,1-.33-0.26l-1.73-11.87-1.29-.44a35.49,35.49,0,0,1-4.19-1.68l-1.24-.61-9.69,7.29a1.23,1.23,0,0,1-.63.19l-11.34-11.32a0.9,0.9,0,0,1,.14-0.68l7.4-9.8-0.61-1.24a35.42,35.42,0,0,1-1.73-4.15l-0.45-1.3-11.91-1.69a0.32,0.32,0,0,1-.27-0.31V467.49a0.31,0.31,0,0,1,.09-0.23,0.31,0.31,0,0,1,.18-0.09l11.89-1.7,0.44-1.3a35.2,35.2,0,0,1,1.72-4.15l0.61-1.23-7.21-9.6a0.35,0.35,0,0,1,0-.44l11.38-11.38a0.35,0.35,0,0,1,.43,0l9.62,7.22,1.21-.59a35.09,35.09,0,0,1,4.18-1.74l1.3-.44,1.69-11.9a0.31,0.31,0,0,1,.09-0.18,0.32,0.32,0,0,1,.23-0.09h16.1a0.31,0.31,0,0,1,.31.27l1.71,11.89,1.3,0.44a35.08,35.08,0,0,1,4.18,1.7l1.23,0.6,9.65-7.25a0.45,0.45,0,0,1,.49,0L2343,448.59a0.46,0.46,0,0,1,0,.49l-7.29,9.69,0.61,1.23a35.49,35.49,0,0,1,1.72,4.16l0.44,1.3,11.9,1.7a0.31,0.31,0,0,1,.27.31v16.1a0.32,0.32,0,0,1-.09.22,0.31,0.31,0,0,1-.18.09l-11.9,1.7-0.44,1.3a35.25,35.25,0,0,1-1.73,4.15l-0.61,1.23,7.19,9.59a0.3,0.3,0,0,1,0,.4Z" transform="translate(-2256.03 -406.85)" class="cog-one"></path>
<circle fill="none" stroke="#231f20" stroke-width="2.75" cx="48.67" cy="68.69" r="20.8" class="circle-one"></circle>
<path fill="none" stroke="#231f20" stroke-width="5.5" d="M2411.82,460.56a0.22,0.22,0,0,1-.25.14l-8.39-2.1-0.65.75a25.64,25.64,0,0,1-2.29,2.31l-0.74.66,2.2,8.41a0.22,0.22,0,0,1,0,.14,0.23,0.23,0,0,1-.12.13l-10.74,4.52a0.22,0.22,0,0,1-.28-0.09l-4.47-7.42-1,.07a25.64,25.64,0,0,1-3.26,0l-1-.06-4.41,7.56a0.89,0.89,0,0,1-.37.3l-10.72-4.37a0.65,0.65,0,0,1-.1-0.49l2.19-8.6-0.75-.65a25.59,25.59,0,0,1-2.31-2.28l-0.66-.74-8.4,2.2a0.23,0.23,0,0,1-.27-0.13l-4.5-10.72a0.23,0.23,0,0,1,0-.18,0.22,0.22,0,0,1,.09-0.11l7.45-4.46-0.07-1a25.43,25.43,0,0,1,0-3.25l0.06-1-7.49-4.38a0.25,0.25,0,0,1-.12-0.29l4.4-10.76a0.25,0.25,0,0,1,.29-0.13l8.43,2.12,0.64-.73a25.35,25.35,0,0,1,2.3-2.33l0.74-.66-2.2-8.4a0.23,0.23,0,0,1,0-.15,0.23,0.23,0,0,1,.12-0.13l10.72-4.51a0.23,0.23,0,0,1,.28.09l4.46,7.44,1-.07a25.34,25.34,0,0,1,3.26,0l1,0.06,4.4-7.53a0.33,0.33,0,0,1,.31-0.17l10.76,4.4a0.33,0.33,0,0,1,.11.34l-2.15,8.49,0.75,0.65a25.64,25.64,0,0,1,2.31,2.29l0.66,0.74,8.4-2.19a0.23,0.23,0,0,1,.27.13l4.5,10.72a0.23,0.23,0,0,1,0,.18,0.23,0.23,0,0,1-.09.11l-7.45,4.46,0.07,1a25.46,25.46,0,0,1,0,3.25l-0.06,1,7.47,4.38a0.22,0.22,0,0,1,.08.28Z" transform="translate(-2256.03 -406.85)" class="cog-two"></path>
<circle fill="none" stroke="#231f20" stroke-width="2.75" cx="2383.36" cy="442.66" r="14.33" transform="translate(-2241.52 550.51) rotate(-22.78)" class="circle-two"></circle>
</svg>

Answer 1

If Safari is drawing the circle the wrong direction, then that will be a bug in Safari. The SVG spec is clear on which direction strokes are meant to go. You may wish to report that bug to Apple.
The way to resolve your immediate problem would be to convert your <circle> elements to <path> elements. That way you control the path direction.