SVG: <use>, javascript, and animation
SVG: <use>, javascript, and animation
所以我有一个简单的嵌入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>元素获得鼠标悬停事件。因为它们都在重复使用相同的路径，如果我提示这个动画，那么所有的元素都会动画。
我是否有办法将第二种表现形式的简洁性与第一种表现形式的个人动画性结合起来?
暴力破解方法是使用脚本生成SVG代码。
可能更优雅的是有两个路径-一个是静态的，一个是动画的，并在需要时通过Javascript更改href属性。
相关文章：
- 将 JQuery Animation 转换为 Javascript/CSS3
- Angular Animation类中Greensock JavaScript的非平滑tweening
- JavaScript animation
- javascript google map setcenter and setzoom with animation
- cancelAnimationFrame for Animation on Javascript
- HTML 5 canvas JavaScript rain animation(如何高效轻松地实现！）.
- javascript + jquery + setinterval + animation
- HTML Canvas 中的 Javascript Animation - 无法将动画保留在边框内
- Nivo Slider Control Nav Animation with javascript
- JavaScript animation setInterval / clearInterval
- swift UIWebView "freeze" animation in javascript
- 使用 javascript 更改 -webkit-animation-play-state
- JavaScript Css Animation
- Bug animation Javascript
- SVG: <use>, javascript, and animation
- JavaScript Canvas: Pong - Animation
- javascript svg animation
- jQuery or Javascript animation
- javascript animation:为什么下一行在动画结束之前运行
- HTML/JAVASCRIPT Animation like on storj.io
