SVG animateTransform切换只工作一次

Question

如果在矩形上单击两次后续的按钮，则会看到一个动画切换：

​

<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
      <rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
        <animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
        <set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
      </rect>
      <rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
        <animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
        <set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
      </rect>
      <text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
        <tspan>Upper Title</tspan>
        <tspan class="project-name-span" x="17" dy="15">lower title</tspan>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
      </text>
    </svg>

​

我想要工作的次数，尽可能多，但它只工作一次；之后，第一次点击的旋转起点是由于某种原因移动到-90度，你会注意到从第三次点击。有什么想法吗？

更新

我注意到以下几点，如果这可能有助于解决问题(仍然无法解决问题)：使用上面的代码片段尝试下面的内容：

( A)单击矩形一次

( B)再次单击矩形，使标签回到原来的位置

( C)在第三次单击矩形之前，将text标记内的四个text标记复制到js变量(例如yourSavedAnimateTransformString )中，然后从标记中删除它们，例如通过

document.getElementsByClassName("timeline-project-label")[0].innerHTML = 
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[0].outerHTML + 
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[1].outerHTML;

，然后在与js完全相同的位置重新插入它们，例如

document.getElementsByClassName("timeline-project-label")[0].innerHTML += 
yourSavedAnimateTransformString

然后，第三次和第四次单击矩形，您将看到它将在不刷新页面的情况下第三次和第四次工作，但对于后续单击则再次失败，除非您在矩形上每2次单击一次重复这个删除-重新插入过程，这对我来说是一个相当麻烦的解决方案。

我认为这个信息可能对解决我的问题很有用，因为它表明我的问题与当前animateTransform标签的无法访问的跟踪状态有关，可以通过每2次点击更新这些标记来消除。由于这不是一个真正的解决方案，我仍然很想了解这里发生了什么..？

更新2

为什么上面的代码片段实际上并不是Safari中所有的转换？？根据规范，除IE.(做完后我会用Fakesmile )？

我现在才注意到这一点；您可以在FF和Chrome中检查我的问题，在这两种情况下，代码片段的行为就像描述的那样。

通过document.getElementById("activate_project_10").beginElement()以编程方式执行它实际上是有效的，但这真的有必要吗？在safari中，svg动画的标准方法是什么？

Answer 1

好的，找到了一个可以在FF和Chrome中工作的解决方案。主要思想是在完成inactivate_project_10动画的最后一个动画之后，用初始值覆盖transform属性的状态，然后触发第一个activate_project_10动画。所有这些同时使用replace而不是sum作为最后一次重置动画的additive值，同时使用accumulate=sum来确保重置所使用的累计(实际上是重新审查的)值。这实际上奏效了：

​

<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
      <rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
        <animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
        <set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
      </rect>
      <rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
        <animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
        <set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
        <set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
      </rect>
      <text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
        <tspan>Upper Title</tspan>
        <tspan class="project-name-span" x="17" dy="15">lower title</tspan>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
        </animateTransform>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="1" dur="0.01s" from="-90 17 121.2" to="-90 17 121.2" fill="freeze" additive="replace" accumulate="sum" begin="inactivate_project_10.end"></animateTransform>
      </text>
    </svg>

​

主要修改如下：

• 将两个主要的animateTransforms (inactivate_project_10和activate_project_10)中的dur更改为与0.5s.

的组合平移+旋转动画同时进行。

• 添加了最后一个animateTransform标记，将transform状态重置为初始状态，以便能够在无休止的单击循环中切换动画。在完成切换周期时，使用特别短的持续时间(使用0.01秒)尽可能快地重置，如果再次触发，则迅速为下一个周期做好准备。

不过，我还是想知道为什么这在Safari根本行不通..？即使您使用beginElement()，它也只适用于前两个开关，然后停止工作。