svg animationTransform from dynamic value

问题

There is a circle. When you mouseover it increases from 1 to 2 when mouseout is reduced from 2 to 1. With the rapid run the mouse over the visible circle of the race to widen the circle. The problem is that the animation start the circle from the values on which he managed will increase, and with the value 2. How to make so that when you mouseout the animation of reduction began with the value that had increased range.

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

 />

回答1:

Simply delete the attribute from="2" from the second animateTransform element.

Because you are no longer providing a starting value for the mouseout animation, this has the effect of making this animation start at whatever value it has at the moment it is started, i.e. at the moment the mouse moves of the element. For example, if the user starts the initial mouseover animation by mousing over the element but then moves the mouse out when the scale has only reached 1.76, then the mouseout animation scaling will start at its current value, i.e. 1.76, not 2, and return to 1.

(To make the code you provided work in the code snippets below (at least in Firefox), I placed the minimal extra code required around your code to get it to work: i.e. I put <svg height="300"> at the top and </svg> at the bottom.)

Original problematic code with working snippet (essentially copied from your question):

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

Revised "fixed" code with working snippet:

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

来源：https://stackoverflow.com/questions/35361691/svg-animationtransform-from-dynamic-value

标签

javascript

animation

svg

smil