c语言以中心缩放原理,动画和旋转关于中心的可缩放SVG对象

我想通过旋转它的中心来动画我的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文件并在浏览器中打开它，您将看到它已损坏。 –