我想更改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不允许使用animate元素.
我已经考虑过在我的线元素上使用变换,如果找不到更好的解决方案,我会沿着这条路走下去.我想避免数学和复杂性.
解决方法
使用JQuery .attr()将“y2”更改为“75％”,就像在
fiddle 1中看到的那样
但困难的是你想要使用过渡.
在这种情况下,您必须使用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,1,0)","-webkit-transform":"matrix(1,"-ms-transform":"matrix(1,0)"
});
});
});
CSS：
.first
{
-webkit-transition-duration: 1s; /* Safari */
transition-duration: 1s;
}
见工作fiddle 2.
提示在矩阵()中使用了一些数字来提供结果.
