技能栏的SMIL动画

Question

我已经找了好几个小时了，我就是不明白为什么我不能在SMIL中找到一个动画技能栏的解决方案。

因此，我得到了一个由两条路径组成的SVG，一条用于外边界，另一条用于填充，我想让页面的fill onload从0开始，在给定的时间(比如800ms)后到达它的最终宽度或位置。看一下超文本标记语言：https://codepen.io/anon/pen/PaOqrr

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" viewBox="0.626 346.31 226.762 13.796" enable-background="new 0.626 346.31 226.762 13.796" xml:space="preserve">
<path fill="#4A929D" d="M159.155,353.208c0,3.536-2.868,6.398-6.398,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0 c0-3.531,2.865-6.397,6.397-6.397h145.233C156.289,346.81,159.155,349.676,159.155,353.208L159.155,353.208z"/>
<path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>

​

我真的很想只使用SMIL来实现这一点。我知道如何使用JS和CSS，但我不敢相信这不适用于animate。

我试过属性"x“和"width”，但它不动。

有什么想法吗？

Answer 1

路径没有x或width属性，所以设置它们的动画效果不会有任何效果。

有几种方法可以实现你想要的。但最简单的可能是使用蒙版或剪辑路径来定义点之间的区域，然后为进度条的位置设置动画。你可以从左边开始(即通过剪辑看不到)，然后慢慢向右移动，这样它看起来就会变长。

您目前的条形图只覆盖了我们进度的三分之二。所以我们不能真正使用它。缩放或移动它对我们没有帮助。因此，我们不妨丢弃它。

但是，我们可以使用点路径，因为它符合我们的需要。如果我们将路径定义复制过来，我们会得到以下结果：

​

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="80%" viewBox="0.626 346.31 226.762 13.796">
  <path fill="#4A929D"
        d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
  <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
        d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>

​

我们现在可以通过动画该路径的transform来动画进度条。我们使用translate()变换将其从左向右移动适当的量。

​

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="80%" viewBox="0.626 346.31 226.762 13.796">
  <path fill="#4A929D"
        d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z">
    <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" from="-226, 0" to="0, 0"
                      dur="3s" fill="freeze"/>
  </path>
  <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
        d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>

​

现在，仅仅移动它是不够的。我们需要隐藏移动条在我们的点通道之外的那部分。我们可以通过应用<mask>或<clipPath>来做到这一点。我将使用剪辑路径。由于剪辑路径将与进度条路径和点路径的形状相同，因此我们将使用相同的定义。

​

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="80%" viewBox="0.626 346.31 226.762 13.796">
  <defs>
    <clipPath id="bar-clip">
      <path d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#bar-clip)">
    <path fill="#4A929D"
          d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z">
      <animateTransform attributeName="transform" attributeType="XML"
                        type="translate" from="-226, 0" to="0, 0"
                        dur="3s" fill="freeze"/>
    </path>
  </g>
  <path fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"
        d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
</svg>

​

当你看到上面的内容时，你可能想知道为什么我们将剪辑应用于一个组(<g>)而不是直接应用于进度条路径本身。原因是，如果我们将其应用于路径，它将受到动画变换的影响。它将随路径移动，因此不会发生裁剪。

最后，我们在这里使用了三次相同的路径。您可能想知道我们是否可以做些什么来使文件更小。答案是肯定的。我们可以只定义一次路径，然后在任何需要它的地方引用它。我们可以使用<use>元素来做到这一点。

​

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
         width="80%" viewBox="0.626 346.31 226.762 13.796">
  <defs>
    <clipPath id="bar-clip">
      <path id="bar-shape" d="M226.888,353.208 c0,3.536-2.867,6.398-6.397,6.398H7.524c-3.533,0-6.397-2.864-6.397-6.398l0,0c0-3.531,2.865-6.397,6.397-6.397H220.49 C224.021,346.81,226.888,349.676,226.888,353.208L226.888,353.208z"/>
    </clipPath>
  </defs>
  <g clip-path="url(#bar-clip)">
    <use xlink:href="#bar-shape" fill="#4A929D">
      <animateTransform attributeName="transform" attributeType="XML"
                        type="translate" from="-226, 0" to="0, 0"
                        dur="3s" fill="freeze"/>
    </use>
  </g>
  <use xlink:href="#bar-shape" fill="none" stroke="#88C2C8" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,2"/>
</svg>

​