【发布时间】：2021-04-04 17:53:23
【问题描述】：
如果您在矩形上连续单击两次，您会看到一个动画切换打开和关闭：
<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 度，正如您在第 3 次单击时会注意到的那样。有什么想法吗？
更新
我注意到以下内容，如果这可能有助于解决问题（仍然无法解决）：使用上面的 sn-p 尝试以下操作：
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-re - 在矩形上的每 2 次单击插入过程，这对我来说是一个相当老套的非解决方案。
我认为此信息可能对解决我的问题有用，因为它表明我的问题与当前animateTransform 标记的无法访问的跟踪状态有关，可以通过在每次第二次点击时更新这些标记来消除这种情况。
由于这不是一个真正的解决方案，我仍然很想了解这里发生了什么..？
更新 2
为什么上面的 sn-p 实际上根本没有在 Safari 中进行转换？根据规范，除 IE 之外的所有设备都支持 animateTransform...（完成后我将使用 Fakesmile..）？
我现在才注意到；您可以在 FF 和 Chrome 中检查我的问题，其中 sn-p 的行为与所述相同。
通过document.getElementById("activate_project_10").beginElement() 以编程方式执行它确实有效，但这真的有必要吗？ safari 中 svg animatransforms 的标准方法是什么？
【问题讨论】：
标签： svg rotation svg-animate smil animatetransform