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

Question

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

我已经用 CSS 动画实现了旋转元素，但只是让元素在悬停时旋转。当使用 CSS.

悬停三个元素中的任何一个时，我无法弄清楚如何让多个元素旋转

我在自己的 svg 标签中将这三个元素作为数据 URI，都在一个 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 文档中，我还有一个包含 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 animation 和嵌套样式来实现类似的效果，而无需 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 放在 g/group 元素中并转换该 g 元素。您可以查看 css，但 svg 上的 css 转换在浏览器支持方面并不总是很好，所以虽然 Davids 的回答可能对普通元素有好处，但我不确定它是否适合svg 元素（尤其是旋转），如果您尝试该方法，请尽早测试不同的浏览器。

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

Using SVG, hover on X, Y or Z to make X and Z rotate

html

javascript

css

svg

snap.svg