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

【问题标题】：Using SVG, hover on X, Y or Z to make X and Z rotate使用 SVG，将鼠标悬停在 X、Y 或 Z 上以使 X 和 Z 旋转
【发布时间】：2016-12-08 04:00:19
【问题描述】：

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

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

我在自己的 svg 标记中将这三个元素作为数据 URI，都在一个 g 中，它本身位于链接到主页的 a 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/

【问题讨论】：

标签： javascript html css svg snap.svg

【解决方案1】：

翻转代码本身看起来不错（假设缺少代码，如果您仍然卡住，我会放置一个 jsfiddle 或 jsbin），它只是应用于错误类型的元素。

我猜您正在使用 jquery 进行选择？如果是这样，我不确定这会起作用..而不是做..

var logo = $("#logoSvg");

试试

var logo = Snap("#logoSvg");

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

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

因此，我会将您要转换的两个 svg 放入 g/group 元素中并转换该 g 元素。您可以查看 css，但 svg 上的 css 转换在浏览器支持方面并不总是很好，所以虽然 Davids 的回答可能对普通元素有好处，但我不确定它是否适用于 svg 元素（尤其是旋转），做如果您确实尝试该方法，请尽早测试不同的浏览器。

【讨论】：

还是有问题，这是我的js小提琴jsfiddle.net/Lc12bvyn试图旋转C和S
只是你的选择器是问题所在，你已经有了一个路径，所以你不需要用 path() 创建一个新的。所以 Snap(somePathSelector) 将单独工作...jsfiddle.net/ian_b/Lc12bvyn/4

【解决方案2】：

您可以在 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};
}

我希望这对克里斯有所帮助，或者至少能让你朝着正确的方向前进。

【讨论】：