css - 为什么我的 css3 悬停效果在 SVG 中不起作用？

Question

我创建了这个 SVG 并放入了一些内联 CSS 来创建悬停效果，但它不起作用。虚线圆圈不会移动和旋转，它只会改变不透明度。此外，没有像普通 css 过渡那样的鼠标移开过渡。我该如何解决这个问题？

.wrap:hover .dash {
   opacity: 0.2;
   transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: translateX(10px);
   -webkit-transform: translateX(10px);
   transform-origin: 50% 50%;
   -webkit-transform-origin: 50% 50%;
   transition: 0.3s linear;
}

我的代码 fiddle 的链接:http://jsfiddle.net/7s4vszu3/1/

Answer 1

这里有几个问题:

首先，您的transition 和transform-origin 应该设置为没有悬停选择器。这就是您在鼠标移出时没有看到正确过渡的原因。其次，您需要将两个转换都包含在同一个规则中，这样一个就不会覆盖另一个。在您的代码中，您的translate 正在覆盖您的rotate。

它应该是这样的:

.wrap .dash {
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transition: transform 1s linear, opacity 1s linear;
}

.wrap:hover .dash {
    opacity: 0.2;
    transform: rotate(90deg) translateX(10px);
    -webkit-transform: rotate(90deg) translateX(10px);
}

此处示例:http://jsfiddle.net/unc3re9b/