你能在SVG属性上使用CSS转换吗？就像一线上的y2？

Question

我想更改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元素.

我已经考虑过在我的线元素上使用变换,如果找不到更好的解决方案,我会沿着这条路走下去.我想避免数学和复杂性.

Answer 1

使用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;
}

查看工作中的小提琴 2。

提示是使用一些数字来matrix()提供您的结果。