如何使用 animateTransform 增加 <rect> 宽度？答案

【问题标题】：How to increase <rect> width using animateTransform?如何使用 animateTransform 增加 <rect> 宽度？
【发布时间】：2018-04-14 15:23:34
【问题描述】：

我有一个<rect>，需要根据给定值使用animateTransform 扩展其宽度。 <rect> 也应该改变颜色如下

如果 <rect> 值为 0 - 29：{fill:red;}
如果 <rect> 值为 30-49：{fill:blue;}
如果 <rect> 值为 50 - 100：{fill:green;}

这是我的 SVG

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 656">
  <defs>
    <style>.cls-1,.cls-4{fill:red;}.cls-2,.cls-5{fill:#29abe2;}.cls-3,.cls-6{fill:#22b573;}.cls-4,.cls-5,.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style>
  </defs>
  <title>Stackoverflow</title>
  <rect class="cls-1" x="45.5" y="67.5" width="104" height="104" />
  <rect class="cls-2" x="46" y="198" width="229" height="104" />
  <rect class="cls-3" x="46" y="340" width="395" height="104" />
  <rect class="cls-3" x="46" y="486" width="544" height="104">

  <animateTransform attributeName="transform"
                        type="translate"
                        from="0 0"
                        to="150 0"
                        begin="0s"
                        dur="2s"
                        repeatCount="indefinite"
                      />


  </rect>
  <text class="cls-4" transform="translate(190.86 128.57)">initial</text>
  <text class="cls-5" transform="translate(317.86 258.57)">30 - 49%</text>
  <text class="cls-6" transform="translate(455.86 408.57)"50 - 100%</text>
  <text class="cls-4" transform="translate(317.86 125.57)">0 - 29%</text>
</svg>

【问题讨论】：

感谢@altocumulus 的编辑
别担心！尽管如此，我很难理解你在追求什么！您正在谈论修改颜色和宽度，但您的 animateTransform 正在作用于 transform 属性。为避免您的问题被社区关闭，我建议您重新考虑并修改您的问题以提供更多信息。
的宽度应该增加到给定的宽度（100）并改变颜色（填充）
我可能会放弃 animateTransform 的想法。然后用纯javascript或者css动画来做。

标签： javascript css d3.js svg

【解决方案1】：

使用<animateTransform> 不是 IMO 的最佳选择。最好使用<animate> 来控制width 属性。

然后您可以在<animate> 添加一个附加项来控制颜色。

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 613 656">
  <defs>
    <style>.cls-1,.cls-4{fill:red;}.cls-2,.cls-5{fill:#29abe2;}.cls-3,.cls-6{fill:#22b573;}.cls-4,.cls-5,.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style>
  </defs>
  <title>Stackoverflow</title>
  <rect class="cls-1" x="45.5" y="67.5" width="104" height="104" />
  <rect class="cls-2" x="46" y="198" width="229" height="104" />
  <rect class="cls-3" x="46" y="340" width="395" height="104" />

  <rect class="cls-3" x="46" y="486" width="544" height="104">
    <animate attributeName="width"
             from="0"
             to="544"
             begin="0s"
             dur="2s"
             repeatCount="indefinite" />
    <animate attributeName="fill"
             values="red; #29abe2; #22b573"
             keyTimes="0; 0.3; 0.5"
             calcMode="discrete"
             begin="0s"
             dur="2s"
             repeatCount="indefinite" />
  </rect>

  <text class="cls-4" transform="translate(190.86 128.57)">initial</text>
  <text class="cls-5" transform="translate(317.86 258.57)">30 - 49%</text>
  <text class="cls-6" transform="translate(455.86 408.57)"50 - 100%</text>
  <text class="cls-4" transform="translate(317.86 125.57)">0 - 29%</text>
</svg>

【讨论】：