如何在 mouseover/mouseout 上为内联 SVG 的填充属性设置动画 (SMIL)

Question

我创建了一个简单的内联 SVG。

使用 SMIL，我尝试将父 SVG id.

的 mouseover 上的所有路径的 fill 属性设置为粉红色。

在 mouseout 我希望 fill 重置为始终。

我不希望fill动画在mouseover上重复。我只希望它运行一次和 'stop'（即保持粉红色），但是，如果动画持续时间完成，仅。

我尝试了以下方法：

#logoSVG {
    width: 100px;
}

<a href="javascript:void(0)" id="logo">
  <svg version="1.1" id="logoSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.7 62.2" enable-background="new 0 0 113.7 62.2" xml:space="preserve">
    <path id="M" fill="#1E90FF" d="M16.1,38.9l-9-30.4H6.7C7.2,14.8,7.2,18.8,7.2,21v17.9H0V0h11.2l9,29.5l0,0L30,0h11.2v38.5h-7.6
    V20.6c0-0.9,0-1.8,0-3.1c0-1.3,0-4,0.4-9h-0.4l-9.8,30.4L16.1,38.9L16.1,38.9z" />
    <path id="A" fill="#1E90FF" d="M74.7,38.9l-2.7-9.4H58.2l-2.7,9.4h-9L60,0h9.8l13.9,38.9H74.7z M69.8,22.8c-2.7-8.5-4-13-4.5-14.3
    c-0.4-0.9-0.4-1.8-0.9-2.7c-0.4,2.2-2.2,7.6-4.9,16.6h10.3V22.8z" />
    <path id="T" fill="#1E90FF" d="M102.9,38.9h-8.1V7.2H84.6V0h29.1v6.7h-10.3v32.2H102.9z" />
    <rect id="Line" y="55.9" fill="#1E90FF" width="113.7" height="6.3" />

    <animate xlink:href="#M" attributeName="fill" from="#1E90FF" to="pink" dur="0.8s" begin="logoSVG.mouseover" end="logoSVG.mouseout" id="m-anim" />
    <animate xlink:href="#A" attributeName="fill" from="#1E90FF" to="pink" dur="0.8s" begin="m-anim.begin + 0s" end="logoSVG.mouseout" id="a-anim" />
    <animate xlink:href="#T" attributeName="fill" from="#1E90FF" to="pink" dur="0.8s" begin="m-anim.begin + 0s" end="logoSVG.mouseout" id="t-anim" />
    <animate xlink:href="#Line" attributeName="fill" from="#1E90FF" to="pink" dur="0.8s" begin="m-anim.begin + 0s" end="logoSVG.mouseout" id="line-anim" />
  </svg>
</a>

如您所见，fill 末尾没有 'stop'。

我错过了什么吗？ mouseover/mouseout 是用于实现此效果的正确值吗？

Answer 1

您可以将 "fill" 属性添加到您的 -Tags，并将其设置为 "freeze"，例如：

<animate xlink:href="#M" attributeName="fill" from="#1E90FF"
  to="pink" dur="0.8s" begin="logoSVG.mouseover" 
  end="logoSVG.mouseout" id="m-anim" fill="freeze"/>

From the docs:

freeze - The animation effect is "frozen" when the active duration of the animation is over for the remainder of the document duration (or until the animation is restarted).

更新

如果正确触发鼠标事件，冻结的填充将不会变回。

或者，您可以明确地为每个状态设置动画：

改变颜色
保持填充
将填充改回原来的颜色

为清楚起见，我将示例缩减为一个字母：

#logoSVG {
    border: 1px dashed #777;
    width: 100px;
}

<a href="javascript:void(0)" id="logo">
  <svg version="1.1" id="logoSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 113.7 62.2" enable-background="new 0 0 113.7 62.2" xml:space="preserve">
    <path id="M" fill="#1E90FF" d="M16.1,38.9l-9-30.4H6.7C7.2,14.8,7.2,18.8,7.2,21v17.9H0V0h11.2l9,29.5l0,0L30,0h11.2v38.5h-7.6
    V20.6c0-0.9,0-1.8,0-3.1c0-1.3,0-4,0.4-9h-0.4l-9.8,30.4L16.1,38.9L16.1,38.9z" />

    <animate xlink:href="#M" attributeName="fill" from="#1E90FF" to="pink" dur="0.8s" begin="logoSVG.mouseover" end="logoSVG.mouseout" id="m-anim" fill="freeze"/>
    <animate xlink:href="#M" attributeName="fill" from="pink" to="pink" dur="0.8s" begin="logoSVG.mouseover+0.8s" end="logoSVG.mouseout" id="m-anim" fill="freeze"/>
    <animate xlink:href="#M" attributeName="fill" from="#1E90FF" to="#1E90FF" begin="logoSVG.mouseout" end="logoSVG.mouseover" id="m-anim" fill="freeze"/>

  </svg>
</a>

旁注：像 begin="m-anim.begin + 0s" 这样的开始值似乎在 Firefox（开发者版 41.0a2 (2015-07-18)）中不起作用，至少在我的机器上是这样

如何在 mouseover/mouseout 上为内联 SVG 的填充属性设置动画 (SMIL)

How to Animate the fill attribute of inline SVG on mouseover/mouseout (SMIL)

animation

svg

hover

mouseover

smil