SVG animateTransform 切换只工作一次

SVG animateTransform toggle only working once

如果您在矩形上连续点击两次,您会看到一个动画开关:

<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 的标准方法是什么?

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

主要修改是:

  • 将两个主要的 animateTransforminactivate_project_10activate_project_10)中的 dur 更改为与合并的平移+旋转同时进行0.5秒的动画。

  • 添加了最后一个 animateTransform 标签以将 transform 状态重置为初始状态,以便能够在无限循环的点击中切换动画。使用特别短的持续时间(使用 0.01 秒)在完成一个切换周期时尽快重置,以便在再次触发时快速准备好下一个周期。

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