Javascript 如何将同一动画应用于多个SVG对象
我想在嵌入式SVG中创建一个柱状图,在每列的鼠标悬停事件上都有一个简单的彩色动画效果。如何仅创建一次动画并将其应用于任何列 在下面的示例中,我将彩色动画放在第一列。具体的问题是如何在其他列(节点)上应用相同的动画而不重复节点。我应该使用JavaScript吗?或者我可以在动画节点上使用某种引用吗Javascript 如何将同一动画应用于多个SVG对象,javascript,html,animation,svg,Javascript,Html,Animation,Svg,我想在嵌入式SVG中创建一个柱状图,在每列的鼠标悬停事件上都有一个简单的彩色动画效果。如何仅创建一次动画并将其应用于任何列 在下面的示例中,我将彩色动画放在第一列。具体的问题是如何在其他列(节点)上应用相同的动画而不重复节点。我应该使用JavaScript吗?或者我可以在动画节点上使用某种引用吗 <svg class="columnChart"> <g transform="matrix(1 0 0 -1 0 0) translate(0, -100)">
<svg class="columnChart">
<g transform="matrix(1 0 0 -1 0 0) translate(0, -100)">
<rect width="10" height="100" x="0" y="0">
<animate attributeName="fill"
attributeType="XML"
begin="mouseover"
dur="0.25s"
fill="freeze"
to="#00ff00"/>
<animate attributeName="fill"
attributeType="XML"
begin="mouseout"
dur="0.25s"
fill="freeze"
to="#000000"/>
</rect>
<rect width="10" height="80" x="15" y="0"/>
<rect width="10" height="55" x="30" y="0"/>
<rect width="10" height="60" x="45" y="0"/>
</g>
<g transform="rotate(90)">
<text x="110">mo</text>
</g>
<g transform="rotate(90)">
<text x="110" y="-15">tu</text>
</g>
<g transform="rotate(90)">
<text x="110" y="-30">we</text>
</g>
<g transform="rotate(90)">
<text x="110" y="-45">th</text>
</g>
</svg>
瞬间
屠
我们
th
提前感谢您的帮助。不幸的是,您不能重用动画元素。因此,是的,您可能应该以两种方式之一使用Javascript。您可以使用它来复制动画元素并将它们添加到每个元素中,或者直接在JS中制作动画(这可能会更好)。您可以通过定义来实现这一点。在我的例子中,我重复使用动画渐变作为填充。使用相关动画定义填充(例如,使用id设置填充动画),然后使用style=“…fill:url(#设置填充动画);…”将其引用为栏中的填充 我认为这可能比js解决方案更好(尽管我在我的案例中使用js来设置定义)。您可以使用。下面是一个结合了SVG动画和CSS转换的示例,其中不透明度通过CSS转换设置动画,矩形宽度通过
元素设置动画