Question

我可以使用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>

用于操纵变换（缩放），就像我在这里使用'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>

但这种结构不起作用。

有效：

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

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

不起作用：

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

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

Answer 1

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

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

1 个答案: