Как оживить атрибут заполнения встроенного SVG при наведении курсора мыши/мыши (SMIL)

Question

Я создал простой встроенный SVG.

Использование SMIL Я попытался анимировать атрибут fill розовым для всех путей на mouseover родительского SVG id.

mouseout Я хочу, чтобы fill был всегда сброс.

I не хочу, чтобы 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/mouseout правильное значение для достижения этого эффекта?

Answer 1

Вы можете добавить "заполнить" атрибут к вашему -Tags и установить его "заморозить", например:

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

замораживание - Эффект анимации «заморожен », когда активная продолжительность анимации заканчивается на оставшуюся часть продолжительности документа (или до возобновления анимации).

Update

Если события мыши срабатывает правильно, замораживают заливка обыкновение меняться обратно.

В качестве альтернативы, вы можете анимировать каждое состояние явно:

1. изменить цвет
2. держать начинку
3. изменения заливки обратно к первоначальному цвету

я уменьшил пример только одна буква, для четкости:

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

Sidenote: начинаются значения, как начать = "м-anim.begin + 0s", похоже, не работает в Firefox (Developer Edition 41.0a2 (2015-07-18), по крайней мере, на моей машине