我尝试使用transform-origin: center
围绕SVG的中心旋转SVG。它在Chrome和Firefox以及100%缩放的Safari中完美工作。当我尝试在Safari中缩小或放大页面时,SVG不会围绕其中心旋转。
https://jsbin.com/duwezonate/1/edit?html,css,output您可以通过从Chrome和Safari访问此链接来检查此链接
下面是我的代码片段:
circle {
stroke: currentColor;
transform-origin: center;
animation: 1s infinite rotate-360;
}
@keyframes rotate-360 {
100% {
transform: rotate(360deg);
}
}
<svg viewBox="0 0 50 50">
<circle fill="none" cx="25" cy="25" r="12" stroke-dasharray="50" stroke-dashoffset="10" />
</svg>
1条答案
按热度按时间67up9zun1#
自2014年以来,这是已知问题,以下是罚单:Bug Link