Question

是否可以使用SVG为d的{{1}}属性制作动画？

我可以将钻石和圆形绘制为由八条贝塞尔曲线组成的路径：

<path>

我想要将转换从一个转换为另一个。

我可以在javascript中模拟这个（只是通过在特定时间线性插值贝塞尔曲线参数），但我想知道是否有办法用SVG。

（圆圈和菱形只是一个例子 - 实际上我想在两个由相同数量的贝塞尔曲线组成的任意实体之间转换。）

Answer 1

这是可能的。这里有很多动画d元素动画的例子：http://hoffmann.bplaced.net/svgtest/index.php?in=attributes#pathd包括动画bezier曲线。您应该能够根据具体用例调整一个。

这是没有弧标志动画的path15。大弧标志只能是0或1，因此线性地设置动画并没有多大意义。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px" viewBox="-500 -500 1000 1000">
<path id="p1"
    d="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
    stroke="blue" fill="none"
    stroke-width="4" />
<animate xlink:href="#p1"
    attributeName="d"
    attributeType="XML"
    from="M 100 100 A 200 400 30 1 0 600 200 a 300 100 45 0 1 -300 200"
        to="M 300 600 A 300 400 -20 1 0 400 200 a 200 600 -50 0 1 100 400"
    dur="10s"
    fill="freeze" />


</svg>

SVG动画路径的属性

1 个答案: