gpt4 book ai didi

css - SVG 微笑 : animateTransform replace to set(opacity and scale attributes)

转载 作者:行者123 更新时间:2023-11-28 17:02:10 25 4
gpt4 key购买 nike

我可以用 animateTransform raplace 来设置吗?

<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur="0.2s" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur="0.2s" fill="freeze"></animateTransform>

对于 transform(scale) 的操作,就像我在此处使用“stroke-opacity”属性所做的那样:

<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"></set>
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"></set>
</rect>

我试着得到这样的东西

<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<set attributeName="transform" type="scale" begin="mousedown" end="mouseout" to="1.15"></set>
<set attributeName="transform" type="scale" begin="mouseup" end="mouseover" to="1"></set>
</rect>

但是这个结构不起作用。

有效:

Example of hover(using set): http://jsfiddle.net/exn2qr0s/

Example of click (using animateTransform): http://jsfiddle.net/exn2qr0s/1/

它不起作用:

Example of click (using set): http://jsfiddle.net/exn2qr0s/2/

我需要使用 set 标签而不是 animateTransform 来创建放大效果,当“鼠标按下”导致 animateTransform 在上次 Fire Fox 更新后现在工作不正常时(Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click))

最佳答案

根据 table in the SVG specification animateTransform 仅适用于变换和所有其他动画元素,包括 <set>不处理转换。

关于css - SVG 微笑 : animateTransform replace to set(opacity and scale attributes),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31028163/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com