SVG animateTransform 切换只工作一次

如何解决SVG animateTransform 切换只工作一次

如果您在矩形上连续点击两次，您会看到一个切换开关的动画：

<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) 在第三次点击矩形之前，将 animateTransform 标签内的四个 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 之外的所有版本都支持 animateTransform ......（完成后我将使用 Fakesmile ......）？

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

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

解决方法

好的，找到了一个适用于 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>

主要修改有：

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

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

SVG animateTransform 切换只工作一次

如何解决SVG animateTransform 切换只工作一次

解决方法

相关推荐