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标签内的四个animateTransform标签复制到一个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

然后，第三次和第四次点击这个矩形，你会看到第三次和第四次没有刷新页面就可以了，但是后面的点击又失败了，除非你重复这个delete - 每次在矩形上单击 2 次时重新插入程序，这对我来说是一个相当棘手的非解决方案。

我认为此信息可能对解决我的问题有用，因为它表明我的问题在某种程度上与当前 animateTransform 标签的不可访问跟踪状态有关，可以通过在每第二次点击。由于这不是一个真正的解决方案，我仍然很想了解这里发生了什么..?

更新 2

为什么上面的代码片段实际上并没有在 Safari 中激活所有的转换？？根据规范，animateTransform 支持除 IE 之外的所有浏览器...（完成后我将使用 Fakesmile...）?

我现在才注意到；您可以在 FF 和 Chrome 中检查我的问题，其中代码段的行为与描述的一样。

通过 document.getElementById("activate_project_10").beginElement() 以编程方式执行此操作确实有效，但这真的有必要吗？ safari 中 svg animatransforms 的标准方法是什么？

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>

主要修改是：

将两个主要的 animateTransform（inactivate_project_10 和 activate_project_10）中的 dur 更改为与合并的平移+旋转同时进行0.5秒的动画。
添加了最后一个 animateTransform 标签以将 transform 状态重置为初始状态，以便能够在无限循环的点击中切换动画。使用特别短的持续时间（使用 0.01 秒）在完成一个切换周期时尽快重置，以便在再次触发时快速准备好下一个周期。

但是，我仍然想知道为什么这在 Safari 中根本不起作用..？即使您使用 beginElement()，也只适用于前两个切换，然后停止工作..

SVG animateTransform 切换只工作一次

SVG animateTransform toggle only working once

svg

rotation

svg-animate

smil

animatetransform