Question

我正在尝试用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>

Answer 1

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

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

补间SVG路径不起作用

1 个答案: