SVG SMIL：animateTransform 替换为设置（不透明度和缩放属性）

Posted 2023-03-06

【中文标题】SVG SMIL：animateTransform 替换为设置（不透明度和缩放属性）

【英文标题】：SVG SMIL: animateTransform replace to set(opacity and scale attributes)

【发布时间】：2015-09-10 18:00:39

【问题描述】：

我可以设置动画转换 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>

对于变换（缩放）的操作，就像我在这里使用我的 'stroke-opacity' 属性所做的那样：

<rect x="-0.5" y="-0.5"   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"   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>

但这种结构不起作用。

有效：

悬停示例（使用集合）：http://jsfiddle.net/exn2qr0s/

点击示例（使用 animateTransform）： http://jsfiddle.net/exn2qr0s/1/

它不起作用：

点击示例（使用集合）： http://jsfiddle.net/exn2qr0s/2/

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

【参考方案1】：

根据table in the SVG specification animateTransform 仅适用于变换，包括<set> 在内的所有其他动画元素都不适用于变换。