Question

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

使用SMIL我尝试将fill属性设置为粉红色，以显示父SVG mouseover的{{1}}上的所有路径。

在id我希望mouseout 始终重置。

我不希望在fill上重复fill动画。我只想让它运行一次并“停止”（即保持粉红色），但是，如果动画持续时间结束，仅。

我尝试了以下内容：

mouseover

#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 / mouseover是否具有用于实现此效果的正确值？

Answer 1

您可以添加＆＃34;填充＆＃34;属性为-Tags，并将其设置为＆＃34;冻结＆＃34;，例如：

<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：

冻结 - 动画效果是＆＃34;冻结＆＃34;当动画的活动持续时间在文档持续时间的剩余时间内结束时（或直到动画重新开始）。

更新

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

或者，您可以明确地为每个州制作动画：

更改颜色
保持填充
将填充更改回原始颜色

为清晰起见，我将示例简化为一个字母：

＆＃13;

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

＆＃13;

<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>

＆＃13;

旁注：开始值如begin =＆＃34; m-anim.begin + 0s＆＃34;似乎在Firefox（Developer Edition 41.0a2（2015-07-18）中不起作用，至少在我的机器上

如何在mouseover / mouseout（SMIL）上为内联SVG的fill属性设置动画

1 个答案: