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 c

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

<svgheight="300"><gtransform="matrix(1 0 0 1 150 150)"id="sec7kpi"><gtransform="matrix(1 0 0 1 0 0)"id="sec7kpi-c1"><ellipsefill="#372356"stroke="#27AE60"stroke-width="16"stroke-miterlimit="10"cx="0"cy="0"rx="71"ry="71" /><textid="sec7text"x="-33"y="15"fill="#27AE60"font-family="LatoRegular"font-size="38.8363"pointer-events="none">KPI</text></g><defs><animateTransformattributeType="XML"xlink:href="#sec7kpi-c1"attributeName="transform"type="scale"dur="500ms"from="1"to="2"restart="whenNotActive"begin="mouseover"fill="freeze"id="c-hover"                

 /><animateTransformattributeType="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:

<svgheight="300"><gtransform="matrix(1 0 0 1 150 150)"id="sec7kpi"><gtransform="matrix(1 0 0 1 0 0)"id="sec7kpi-c1"><ellipsefill="#372356"stroke="#27AE60"stroke-width="16"stroke-miterlimit="10"cx="0"cy="0"rx="71"ry="71" /><textid="sec7text"x="-33"y="15"fill="#27AE60"font-family="LatoRegular"font-size="38.8363"pointer-events="none">KPI</text></g><defs><animateTransformattributeType="XML"xlink:href="#sec7kpi-c1"attributeName="transform"type="scale"dur="500ms"from="1"to="2"restart="whenNotActive"begin="mouseover"fill="freeze"id="c-hover"                

 /><animateTransformattributeType="XML"xlink:href="#sec7kpi-c1"attributeName="transform"type="scale"dur="500ms"to="1"restart="whenNotActive"begin="mouseout"fill="freeze"id="c-out"                  

 /></svg>