【发布时间】：2012-01-03 23:31:55
【问题描述】：
所以我有一个简单的嵌入式 SVG 图像。我正在使用 javascript 的 beginElement() 来提示特定部分的动画：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
jQuery(function(){ $('path').mouseover(function(){ $('animateTransform', this)[0].beginElement(); }); });
</script>
</head>
<body>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="400"
height="400"
>
<g transform="translate(200,200)" stroke="black">
<g>
<g transform="rotate(0)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(24)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(48)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(72)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(96)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(120)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(144)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(168)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(192)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(216)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(240)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(264)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(288)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(312)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
<g transform="rotate(336)">
<path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue">
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" />
</path>
</g>
</g>
</g>
</svg>
</body>
</html>
图片本身是相当重复的——我可以用<use>标签来简化它：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="plume" d="M 0 0 L -20.791169081775931 97.81476007338057 A 2 2 0 0 0 20.791169081775931 97.81476007338057 Z" >
<animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0"/>
</path>
<g id="fifth">
<g transform="rotate(0.0)">
<use xlink:href="#plume" fill="red"/>
</g>
<g transform="rotate(24.0)">
<use xlink:href="#plume" fill="green"/>
</g>
<g transform="rotate(48.0)">
<use xlink:href="#plume" fill="blue"/>
</g>
</g>
</defs>
<g transform="translate(200,200)" stroke="black">
<use xlink:href="#fifth" transform="rotate(0.0)"/>
<use xlink:href="#fifth" transform="rotate(72.0)"/>
<use xlink:href="#fifth" transform="rotate(144.0)"/>
<use xlink:href="#fifth" transform="rotate(216.0)"/>
<use xlink:href="#fifth" transform="rotate(288.0)"/>
</g>
</svg>
但是我不能再为单个 <path> 元素注册鼠标悬停事件，因为它们不可见。现在，<use> 元素获得了鼠标悬停事件。而且由于它们都重用相同的路径，如果我提示该动画，那么所有元素都会动画。
有什么方法可以将第二个表示的简洁性与第一个表示的个人动画性结合起来？
【问题讨论】：
标签： javascript animation svg