如果您在矩形上连续单击两次，您会看到一个打开和关闭的动画：
<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 次单击时会注意到的那样。有任何想法吗？
更新
我注意到以下内容，如果这可能有助于解决问题（仍然无法解决）：使用上面的代码段尝试以下内容：
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
为什么上面的代码片段实际上并没有使 Safari 中的转换完全没有变化？根据规范，animateTransform除 IE 之外的所有设备都支持...（完成后我将使用 Fakesmile..）？
我现在才注意到它；您可以在 FF 和 Chrome 中检查我的问题，其中代码段的行为与所述相同。
以编程方式通过document.getElementById("activate_project_10").beginElement()确实有效，但这真的有必要吗？svg animatransforms 在 safari 中的标准方法是什么？