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>
主要修改是:
将两个主要的 animateTransform
(inactivate_project_10
和 activate_project_10
)中的 dur
更改为与合并的平移+旋转同时进行0.5秒的动画。
添加了最后一个 animateTransform
标签以将 transform
状态重置为初始状态,以便能够在无限循环的点击中切换动画。使用特别短的持续时间(使用 0.01 秒)在完成一个切换周期时尽快重置,以便在再次触发时快速准备好下一个周期。
但是,我仍然想知道为什么这在 Safari 中根本不起作用..?即使您使用 beginElement()
,也只适用于前两个切换,然后停止工作..
如果您在矩形上连续点击两次,您会看到一个动画开关:
<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>
主要修改是:
将两个主要的
animateTransform
(inactivate_project_10
和activate_project_10
)中的dur
更改为与合并的平移+旋转同时进行0.5秒的动画。添加了最后一个
animateTransform
标签以将transform
状态重置为初始状态,以便能够在无限循环的点击中切换动画。使用特别短的持续时间(使用 0.01 秒)在完成一个切换周期时尽快重置,以便在再次触发时快速准备好下一个周期。
但是,我仍然想知道为什么这在 Safari 中根本不起作用..?即使您使用 beginElement()
,也只适用于前两个切换,然后停止工作..