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 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);

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

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

Answer 1

你可以在SCSS中使用@keyframes animation和嵌套样式来实现这样的东西而不需要javascript。不确定你是否想要走这条路，但对我来说这似乎是最直截了当的。

特别是您希望在要旋转的元素上将var path = require('path'); var fs = require('fs'); var file1 = './frank.txt'; var file2 = './jasmine.html'; var file3 = './finnigan.jpg'; var extRegex = new RegExp(/^(\.txt|\.html)$/); if ( fs.statSync(file2).isFile && extRegex.test( path.extname(file2) ) ) { console.log('true'); } else { console.log('failure'); }设置为无限。

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

animation-iteration-count

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

Answer 2

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

我猜你正在使用jquery进行选择？如果是这样的话，我不确定它是否会起作用..而不是...... .. / / p>

var logo = $("#logoSvg");

试

var logo = Snap("#logoSvg");

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

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

所以，我会把你想要转换的两个svgs放在一个g / group元素中并转换那个g元素。你可以看看css，但是svg上的css变换并不总是在浏览器支持方面表现得很好，所以虽然Davids的回答可能对普通元素有好处，但我不确定它会对svg元素（尤其是旋转）有好处，如果您尝试使用该方法，请尽早测试不同的浏览器。

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

2 个答案: