从动态值SVG animationTransform [英] svg animationTransform from dynamic value
问题描述
有一个圆。当将鼠标放置时鼠标移开从2降低到1它增加从1到2。
随着国民经济的快速奔跑鼠标在比赛的可见圈扩大的圆圈。问题是，在动画开始自该人管理会增加值的圆圈，并与值2如何使这样，当您鼠标移开减少的动画开始与具有增加范围的值。
＆LT克变换=矩阵（1 0 0 1 150 150）ID =sec7kpi＆GT;
＆LT克变换=矩阵（1 0 0 1 0 0）ID =sec7kpi-C1＆GT;
＆LT;椭圆填充=＃372356行程=＃27AE60笔画宽度=16中风miterLimit分别=10CX =0CY =0RX =71RY =71/ ＆GT;
＆LT;文本ID =sec7textX = - 33Y =15补=＃27AE60FONT-FAMILY =LatoRegularFONT-SIZE =38.8363指针事件=无＆GT; KPI＆LT; /文字和GT;
＆所述; / g取代;
＆LT;＆DEFS GT;
＆LT; animateTransform属性类型=XML
的xlink：HREF =＃sec7kpi-C1
的attributeName =改造
TYPE =规模
DUR =500毫秒
从=1
为=2
重新启动=whenNotActive
开始=鼠标悬停 填写=冻结
ID =C-悬停 /＆GT;
＆LT; animateTransform属性类型=XML
的xlink：HREF =＃sec7kpi-C1
的attributeName =改造
TYPE =规模
DUR =500毫秒
从=2
为=1
重新启动=whenNotActive
开始=鼠标移开 填写=冻结
ID =C-去 /＆GT;
只需删除属性从=2从第二 animateTransform 元素。
由于你不再提供对鼠标移开动画起始值，这有它有它开始的那一刻任何值使得这部动画开始的效果，即此刻元件的鼠标的移动。例如，如果用户将鼠标悬停在元素开始初始鼠标悬停动画，但然后移动鼠标移出时规模才达到1.76，那么鼠标移开动画缩放将在其当前值开始，即1.76，而不是2，返回1。
的（为了使code您在code以下片段（至少在Firefox），我把周围的code所需的最低额外的code获得提供工作它的工作：即我把＆LT; SVG HEIGHT =300＆GT; 在顶部和＆LT; / SVG＆GT; 在底部。）的
原始问题code。与工作段（基本上是从你的问题复制）：
＆LT; SVG HEIGHT =300＆GT;\r
＆LT克变换=矩阵（1 0 0 1 150 150）ID =sec7kpi＆GT;\r
＆LT克变换=矩阵（1 0 0 1 0 0）ID =sec7kpi-C1＆GT;\r
＆LT;椭圆填充=＃372356行程=＃27AE60笔画宽度=16中风miterLimit分别=10CX =0CY =0RX =71RY =71/ ＆GT;\r
＆LT;文本ID =sec7textX = - 33Y =15补=＃27AE60FONT-FAMILY =LatoRegularFONT-SIZE =38.8363指针事件=无＆GT; KPI＆LT; /文字和GT;\r
＆所述; / g取代;\r
\r
＆LT;＆DEFS GT;\r
\r
\r
＆LT; animateTransform属性类型=XML\r
的xlink：HREF =＃sec7kpi-C1\r
的attributeName =改造\r
TYPE =规模\r
DUR =500毫秒\r
从=1\r
为=2\r
重新启动=whenNotActive\r
开始=鼠标悬停\r
\r
填写=冻结\r
ID =C-悬停\r
\r
/＆GT;\r
＆LT; animateTransform属性类型=XML\r
的xlink：HREF =＃sec7kpi-C1\r
的attributeName =改造\r
TYPE =规模\r
DUR =500毫秒\r
从=2\r
为=1\r
重新启动=whenNotActive\r
开始=鼠标移开\r
\r
填写=冻结\r
ID =C-去\r
\r
/＆GT;\r
＆LT; / SVG＆GT; \r
修订后的固定code。与工作片段：
＆LT; SVG HEIGHT =300＆GT;\r
＆LT克变换=矩阵（1 0 0 1 150 150）ID =sec7kpi＆GT;\r
＆LT克变换=矩阵（1 0 0 1 0 0）ID =sec7kpi-C1＆GT;\r
＆LT;椭圆填充=＃372356行程=＃27AE60笔画宽度=16中风miterLimit分别=10CX =0CY =0RX =71RY =71/ ＆GT;\r
＆LT;文本ID =sec7textX = - 33Y =15补=＃27AE60FONT-FAMILY =LatoRegularFONT-SIZE =38.8363指针事件=无＆GT; KPI＆LT; /文字和GT;\r
＆所述; / g取代;\r
\r
＆LT;＆DEFS GT;\r
\r
\r
＆LT; animateTransform属性类型=XML\r
的xlink：HREF =＃sec7kpi-C1\r
的attributeName =改造\r
TYPE =规模\r
DUR =500毫秒\r
从=1\r
为=2\r
重新启动=whenNotActive\r
开始=鼠标悬停\r
\r
填写=冻结\r
ID =C-悬停\r
\r
/＆GT;\r
＆LT; animateTransform属性类型=XML\r
的xlink：HREF =＃sec7kpi-C1\r
的attributeName =改造\r
TYPE =规模\r
DUR =500毫秒\r
为=1\r
重新启动=whenNotActive\r
开始=鼠标移开\r
\r
填写=冻结\r
ID =C-去\r
\r
/＆GT;\r
＆LT; / SVG＆GT; \r
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"
/>
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>
这篇关于从动态值SVG animationTransform的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
