svg animationTransform от динамического значения

Question

Существует круг. Когда вы наводите курсор мыши, оно увеличивается от 1 до 2, когда мышь уменьшается с 2 на 1. С быстрым прогоном мышь над видимым кругом гонки, чтобы расширить круг. Проблема в том, что анимация начала круг из значений, на которых он управлял, будет увеличиваться и со значением 2. Как сделать так, что когда вы начнете анимацию сокращения, начните с значения, которое увеличилось.

<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi"> 
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1"> 
    <ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" /> 
    <text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>  
</g> 

<defs> 


<animateTransform attributeType="XML" 
        xlink:href="#sec7kpi-c1" 
        attributeName="transform" 
        type="scale" 
        dur="500ms" 
        from="1" 
        to="2" 
        restart="whenNotActive" 
        begin="mouseover" 

        fill="freeze"       
        id="c-hover"     

/> 
    <animateTransform attributeType="XML" 
        xlink:href="#sec7kpi-c1" 
        attributeName="transform" 
        type="scale" 
        dur="500ms" 
        from="2" 
        to="1" 
        restart="whenNotActive" 
        begin="mouseout" 

        fill="freeze"       
        id="c-out"     

/> 

Answer 1

Просто удалите атрибут from="2" из второго animateTransform элемента.

Поскольку вы больше не предоставляете начальное значение для анимации mouseout, это приводит к тому, что эта анимация начинается с любого значения, которое она имеет в момент ее запуска, то есть в тот момент, когда мышь перемещается элемента. Например, если пользователь запускает начальную анимацию mouseover, перемещаясь по элементу, но затем перемещает мышь, когда масштаб достиг только 1,76, тогда масштабирование анимации mouseout начнется с его текущего значения, то есть 1,76, а не 2, а возврат до 1.

(Чтобы код, который вы предоставили, работал в фрагментах кода ниже (по крайней мере, в Firefox), я поместил минимальный дополнительный код, необходимый для вашего кода, чтобы заставить его работать: т.е. я положил <svg height="300"> на верх и </svg> на дне.)

Оригинала проблематично код с рабочим фрагментом (по существу скопирован из йа ур вопрос):

<svg height="300"> 
 
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi"> 
 
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1"> 
 
    <ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" /> 
 
    <text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>  
 
</g> 
 

 
<defs> 
 

 

 
<animateTransform attributeType="XML" 
 
        xlink:href="#sec7kpi-c1" 
 
        attributeName="transform" 
 
        type="scale" 
 
        dur="500ms" 
 
        from="1" 
 
        to="2" 
 
        restart="whenNotActive" 
 
        begin="mouseover" 
 

 
        fill="freeze"       
 
        id="c-hover"     
 

 
/> 
 
    <animateTransform attributeType="XML" 
 
        xlink:href="#sec7kpi-c1" 
 
        attributeName="transform" 
 
        type="scale" 
 
        dur="500ms" 
 
        from="2" 
 
        to="1" 
 
        restart="whenNotActive" 
 
        begin="mouseout" 
 

 
        fill="freeze"       
 
        id="c-out"     
 

 
/> 
 
    </svg>

Пересмотренный "фиксированный" код с рабочим сниппета:

<svg height="300"> 
 
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi"> 
 
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c1"> 
 
    <ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" /> 
 
    <text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>  
 
</g> 
 

 
<defs> 
 

 

 
<animateTransform attributeType="XML" 
 
        xlink:href="#sec7kpi-c1" 
 
        attributeName="transform" 
 
        type="scale" 
 
        dur="500ms" 
 
        from="1" 
 
        to="2" 
 
        restart="whenNotActive" 
 
        begin="mouseover" 
 

 
        fill="freeze"       
 
        id="c-hover"     
 

 
/> 
 
    <animateTransform attributeType="XML" 
 
        xlink:href="#sec7kpi-c1" 
 
        attributeName="transform" 
 
        type="scale" 
 
        dur="500ms" 
 
        to="1" 
 
        restart="whenNotActive" 
 
        begin="mouseout" 
 

 
        fill="freeze"       
 
        id="c-out"     
 

 
/> 
 
    </svg>