使用SVG，将鼠标悬停在X，Y或Z上以使X和Z旋转

Question

我的网页上有一个元素（徽标），其中包含其他三个元素，因此，当徽标整体悬停时，徽标中的两个元素（两个字母）将无限地围绕其中心旋转。

我已经使用CSS动画实现了旋转元素，但是只是使元素在悬停时旋转。 我无法弄清楚当使用CSS悬停三个元素中的任何一个时如何旋转多个元素。

我在自己的svg标记中将这三个元素作为数据URI包含在单个g中，而g本身位于链接到首页的href中。

<header><a id="logoLink" href="">

<g class="logoSvg">

<svg id="c" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.68 37.2"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo</title><path class="cls-1" d="...
</svg>
<svg id="hri" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76.88 79.53"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo copy</title><path class="cls-1" d="M
</svg>
<svg id="s" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31.19 37.2"><defs><style>.cls-1{fill:#e94a4a;}</style></defs><title>logo copy 2</title><path class="cls-1" d="M
</svg>

</g>

</a>

在html doc中，我还有一个包含SnapSVG内容的脚本源，以及指向SnapSVG源代码的链接：

<script src="js/logoAni.js"></script>

SnapSVG js如下：

var logo = $("#logoSvg");
var c = $("#c");
var hri = $("#hri");
var s = $("#s");

function rollover(){
    c.transform('r0,100,100');
    c.animate({transform: "r360,100,100"},1000,mina.linear,anim);
    s.transform('r0,100,100');
    s.animate({transform: "r360,100,100"},1000,mina.linear,anim);
}

logo.hover(rollover);

我假设快照代码是错误的。 也许我根本不需要使用snap？

更新：这是最近的jfiddle https://jsfiddle.net/Lc12bvyn/

Answer 1

您可以在SCSS中使用@keyframes动画和嵌套样式来实现类似这种功能，而无需使用javascript。 不知道您是否要走这条路，但这对我来说似乎最直接。

特别是，您希望将要旋转的元素的animation-iteration-count为无限。

以下代码只是一些粗略的概念方面的内容，不确定要设置的动画或元素的完整上下文等。

.logoSvg {

  &:hover {

    &:first-child {
      animation-name: someAnimation;
      animation-iteration-count: infinite;
    }

    &:last-child {
      animation-name: someAnimation;
      animation-iteration-count: infinite;
    }
  }
}

@keyframes someAnimation {
  0%: {transform: some transformation};
  100%: {transform: some transformation};
}

我希望这对克里斯有帮助，或者至少可以使您朝正确的方向前进。

Answer 2

过渡代码本身看起来还不错（假设缺少代码，如果您仍然卡住，我会放上jsfiddle或jsbin），它只是适用于错误类型的元素。

我猜您正在使用jquery进行选择？ 如果是这样，我不确定那是否行得通。

var logo = $("#logoSvg");

尝试

var logo = Snap("#logoSvg");

这样，您将获得Snap元素（链接到DOM元素）进行操作，而不是DOM或jquery对象。

您通常不能转换'svg'元素本身（据我所知，它在技术上不支持transform属性）。

因此，我将要转换的两个svg放入ag / group元素内，然后转换该g元素。 您可以研究一下css，但是svg上的css转换在浏览器支持方面并不总是很好，因此，尽管Davids的回答对于常规元素可能很好，但我不确定它对svg元素（尤其是旋转）是否很好，但是如果您尝试使用该方法，请尽早测试其他浏览器。