calcMode, keyTimes, keySplines属性作用演示页面

展示

代码

• 演示HTML：

  <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
      <text font-size="60" y="60" x="160">马
          <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
      </text>
  </svg>
  <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
      <text font-size="60" y="60" x="160">马
          <animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="paced"/>
      </text>
  </svg>
  <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
      <text font-size="60" y="60" x="160">马
          <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
      </text>
  </svg>
  <svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
      <text font-size="60" y="60" x="160">马
          <animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline"  keySplines=".5 0 .5 1; 0 0 1 1" />
      </text>
  </svg>