svg动画从动态值转换

Question

有一个圆圈。当您将 mouseover 从 2 减少到 1 时，它从 1 增加到 2。用快速运行鼠标悬停在可见的圈圈上，使圈圈变宽。问题是动画从他管理的值开始圆圈将增加，并且值为 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

只需从第二个 animateTransform 元素中删除属性 from="2"。

因为您不再为 mouseout 动画提供起始值，所以这会使该动画从它开始时的任何值开始，即在鼠标移动时元素的移动。例如，如果用户通过将鼠标悬停在元素上来启动初始 mouseover 动画，然后在比例仅达到 1.76 时将鼠标移出，则 mouseout 动画缩放将从其当前值开始，即 1.76，而不是 2，并且 return 到 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>

修改后的 "fixed" 代码，包含工作片段：

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

svg动画从动态值转换

svg animationTransform from dynamic value

javascript

animation

svg

smil