javascript - svg 动画从动态值转换

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>