css - 可以在 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 不允许动画元素。

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

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

查看工作 fiddle 2 .

技巧是在提供结果的 matrix() 中使用一些数字。