gpt4 book ai didi

jquery - 使用 SVG 动画和翻转六边形

转载 作者:行者123 更新时间:2023-11-28 16:06:37 26 4
gpt4 key购买 nike

我从未真正使用过 SVG,但现在阅读了一些有关它的教程并测试了一些东西。我正在学习如何制作类似六边形的形状,但现在需要使其在垂直轴上向下翻转并扩大尺寸,同时将未翻转六边形的底部保持为新翻转六边形的顶部。

我的代码在这里:

<html>
<style>
#test:hover {
fill: yellow;
}
</style>
<body>
<div class="viewBox">
<h1>SVG Testing</h1>
<svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">
<path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
</svg>
</div>
</body>
</html>

我的下一步是什么?

我是否使用库来执行此操作?

最佳答案

您可以使用 Snap,因为您已经用它标记了问题..

Snap('#test').animate({ transform: 't0,260s2,-2'},2000, mina.bounce)

翻译“t”和缩放“s”,因为底线会在缩放时自动漂移变化(或者您可以从中心缩放)。

jsfiddle

关于jquery - 使用 SVG 动画和翻转六边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39110162/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com