如何为单个 SVG 多边形点设置动画?
How to animate a single SVG Polygon Point?
如何在 SVG 中设置(移动)单个多边形点的动画?如果可能,使用 velocity.js.
感谢您的帮助!
<p>From...</p>
<svg height="250" width="500">
<polygon points="0,0 200,0 200,200 00,200" style="fill:green" />
</svg>
<p>to...</p>
<svg height="250" width="500">
<polygon points="0,0 300,0 200,200 00,200" style="fill:blue" />
</svg>
这套房适合你吗?
<svg height="250" width="500">
<polygon points="0,0 200,0 200,200 00,200" style="fill:blue">
<animate begin="shape.click" id="animation-to-click" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,0 300,0 200,200 00,200" />
</polygon>
</svg>
<input type="button" value="click me" onclick="document.getElementById('animation-to-click').beginElement()"/>
由于 <animate>
标签很快就会被弃用,这里有一个替代方法 d3.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="250" width="500">
<polygon id="my-polygon" points="0,0 200,0 200,200 00,200" fill="blue" />
</svg>
<input type="button" value="click me" onclick="transformPolygon()"/>
<script type="text/javascript">
function transformPolygon() {
var myPolygon = d3.select(document.getElementById('my-polygon'))
myPolygon
.transition()
.duration(1500)
.ease("elastic")
.attr('fill','green')
.attr('points','0,0 300,0 200,200 00,200')
}
</script>
如何在 SVG 中设置(移动)单个多边形点的动画?如果可能,使用 velocity.js.
感谢您的帮助!
<p>From...</p>
<svg height="250" width="500">
<polygon points="0,0 200,0 200,200 00,200" style="fill:green" />
</svg>
<p>to...</p>
<svg height="250" width="500">
<polygon points="0,0 300,0 200,200 00,200" style="fill:blue" />
</svg>
这套房适合你吗?
<svg height="250" width="500">
<polygon points="0,0 200,0 200,200 00,200" style="fill:blue">
<animate begin="shape.click" id="animation-to-click" begin="indefinite" fill="freeze" attributeName="points" dur="500ms" to="0,0 300,0 200,200 00,200" />
</polygon>
</svg>
<input type="button" value="click me" onclick="document.getElementById('animation-to-click').beginElement()"/>
由于 <animate>
标签很快就会被弃用,这里有一个替代方法 d3.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height="250" width="500">
<polygon id="my-polygon" points="0,0 200,0 200,200 00,200" fill="blue" />
</svg>
<input type="button" value="click me" onclick="transformPolygon()"/>
<script type="text/javascript">
function transformPolygon() {
var myPolygon = d3.select(document.getElementById('my-polygon'))
myPolygon
.transition()
.duration(1500)
.ease("elastic")
.attr('fill','green')
.attr('points','0,0 300,0 200,200 00,200')
}
</script>