我想更改 SVG 线条的属性,并以动画方式过渡到新坐标。
在此示例中,我使用 reactjs 更改 y2 的值:
<line stroke='green' x1='0' y1='50%' x2='100%' y2='25%'>
到
<line stroke='green' x1='0' y1='50%' x2='100%' y2='75%'>
像CSS一样
.myStuff * {
transition: all 1s;
}
CSS 过渡是否可以在 y2 属性上起作用?或者有没有办法在 CSS 中设置线条的属性,例如:
.myStuff line {
y2: 25%;
}
(我知道这是行不通的)
我考虑过使用 javascript,但这增加了复杂性
我考虑过使用 SMIL,但我必须存储新旧 y2 状态,而且我认为 reactjs 不允许动画元素。
我考虑过在我的线条元素上使用变换,如果找不到更好的解决方案,我会沿着这条路走下去。我想避免数学和复杂性。
最佳答案
使用 JQuery .attr()
将 "y2"
更改为 "75%"
,就像您在fiddle 1
但困难的部分是你想使用transition
。
在这种情况下,您必须使用 transform:matrix()
:
HTML:
<svg height="300" width="300">
<line class="first" stroke='green' x1='0' y1='50%' x2='100%' y2='25%'/>
</svg>
<button id="change">change</button>
JQuery:
$(document).ready(function(){
$("#button").click(function(){
$(".first").css({
"transform":"matrix(1, 0.6, 0, 1, 0, 0)",
"-webkit-transform":"matrix(1, 0.6, 0, 1, 0, 0)",
"-ms-transform":"matrix(1, 0.6, 0, 1, 0, 0)"
});
});
});
CSS:
.first
{
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
查看工作 fiddle 2 .
技巧是在提供结果的 matrix()
中使用一些数字。
关于css - 可以在 SVG 属性上使用 CSS 转换吗?就像一条线上的 y2?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32075830/