0

我正在尝试使用 SVG 对两个形状进行补间 - 对 svg 来说非常新 - 我遇到了一个问题。

因此，按照我在这里找到的建议：http ://www.jaredstanley.com/blog/2013/05/15/tweening-a-vector-path-in-svg/ ，我在他的 SVG 中获取了代码并尝试使用我自己的。这是一个非常简单的形状，所以认为它很容易。

我可以将一个正方形补间到一个较小的正方形，但只要我移动一个点，它就会停止动画并只是切换图像。有点难以解释，所以这里有一个例子：http ://codepen.io/jhealey5/pen/raNVdg

和代码： 

    <path id="shape_path" />
    <animate xlink:href="#shape_path"
      attributeName="d"
      attributeType="XML"
      from="M136,36H0V0c0,0,110.6,0,136,0C136,11.4,136,36,136,36z"
            to="M106.3,28.2H29.7V7.9c0,0,62.3,0,76.6,0C106.3,14.3,106.3,28.2,106.3,28.2z"
      dur="3s"
      fill="freeze" />

    </svg>
    </div>

    <hr />
    <div>

    <svg viewBox="0 0 100 100" 
      xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="tiny"
      xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="shape_path2" />
    <animate xlink:href="#shape_path2"
      attributeName="d"
      attributeType="XML"
      from="M136,36H0V0c0,0,110.6,0,136,0C136,11.4,136,36,136,36z"
            to="M136,36H0L7.2,7.2C7.2,7.2,110.6,0,136,0C136,11.4,136,36,136,36z"
      dur="3s"
      fill="freeze" />

    </svg>
    </div>
4

1 回答 1

1

平滑动画要求两条路径在每个点具有相同数量的子路径和相同类型的子路径。即，如果路径 a) 是 M x,y V x，则路径 b) 必须以 M 或 m 开头，然后是 V 或 v。

您的第二个示例无法平滑动画，因为第二个路径项在一种情​​况下是 V，而在另一种情况下是 H。如果在两种情况下都使用 L 或 l 并带有适当的数字，您可能会使其工作。

于 2014-11-12T17:39:44.843 回答