0
私はCSS SVGアニメーションと戦っています。私は克服できない問題を発見しました。私のアニメーションはChrome、Opera、Firefoxで正常に動作しますが、Safariには問題があります。円内は反時計回りに表示されます。
誰でもこれを解決する方法を知っていますか？
ありがとうございます！SVG逆アセンブルCSSアニメーションクロスブラウザ
.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>