我想通过旋转它的中心来动画我的SVG,但由于我的SVG大小不同,中心点会根据在我的网页中使用的位置。动画和旋转关于中心的可缩放SVG对象
这里是我的SVG:
spinning orange circle.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
stroke: #ed770b;
transform-origin: 50% 50%;
animation: dash 1.4s ease-in-out infinite;
}
@keyframes dash {
0% { stroke-dashoffset: 187; }
50% {
stroke-dashoffset: 46.75;
transform:rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform:rotate(450deg);
}
}
type="rotate"
from="0"
to="360"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
拷贝到桌面并将其保存为一个SVG和运行在浏览器中看到的问题。
现在这项工作在stackoverflow中,但是当它在我的页面上,或者只在一个页面上时,微调器就会飞出视图。我怎样才能让它围绕它的中心旋转?假设我稍后使用CSS将其缩放到50x50像素或更大,并且我怎样才能让它围绕中心旋转?
编辑:如果你改变了动画转换为具有这些值:
type="rotate"
from="0 14 14"
to="360 14 14"
begin="0s"
dur="1.4s"
repeatCount="indefinite"
/>
它会工作,但一旦你缩放图像比28px * 28px较大,这将不再工作。
2017-08-09
knames
+0
你能否用示例显示问题来更新代码? (位置/比例/等) –
+0
@Dekel我不知道如何。如果您将片段复制到文本文件中并将其另存为.svg文件并在浏览器中打开它,您将看到它已损坏。 –