CSS3轮换问题

Question

我遇到CSS3轮换问题。在图像上，您可以看到我需要在悬停时设置动画的SVG对象。左边的对象是一个开始状态，右边的对象是我必须完成的一个例子。

我试过这个：

.svg-pokazivac {
   transition: .2s all ease-in-out;
}
.svg-pokazivac:hover {
   transform: rotate(45deg);
   transform-origin: center center;
}

但是无论我做什么以及我选择哪个变换原点，我总是得到一个错位的对象并转换成某个奇怪的位置。到目前为止，我最接近解决方案的是使用如下代码：

.svg-pokazivac:hover {
   transform: translate(350px,-150px) rotate(45deg);
}

但动画非常有趣。我做错了什么？

Answer 1

你得到了奇怪的行为，因为过渡：所有都导致两个不同变换起源之间的转换 - 默认和明确指定的转换起源。现在CSS变换原点的静默默认值应该是50％50％ - 所以这不应该是一个问题，但显然Chrome认为SVG形状的静默默认值是0％0％的SVG变换的默认值。 [可能错误！]如果你向你的基类添加一个转换原点它可以正常工作。

.svg-pokazivac {
   transition: .2s all ease-in-out;
       transform-origin: 347px 347px;
}
.svg-pokazivac:hover {
   transform: rotate(1805deg);
   transform-origin: 347px 347px;
}

请注意，变换原点的50％50％不能正常工作，因为指针包含在中心的计算中。此外，您可能认为可以通过从转换全部切换到转换转换（不包括转换原点）来解决此问题，但这不起作用。仅在基类中指定变换原点就可以了。

Answer 2

喝了几杯咖啡后，我终于成功了。我所做的是从SVG元素中完全删除指针和圆圈，并在纯CSS中重新制作它们：

.svg-pointer {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45.5px 46px 45.5px;
    border-color: transparent transparent #4e4e4e transparent;
    position: absolute;
    top: 125px;
    left: 306px;
    transform-origin: 50% 227px;
}

.svg-circle {
    width: 379px;
    height: 379px;
    border-radius: 999px;
    background: #4e4e4e;
    position: absolute;
    top: 161px;
    left: 159px;
}

其余的只是一个javascript转换操作。你可以在这里看到整个解决方案： http://jsfiddle.net/3c7zf4uq/7/

此外，我想指出这篇非常有帮助的文章对我有很大的帮助：http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS

我希望它可以帮助有类似问题的人：）