你能在SVG属性上使用CSS过渡效果吗？例如线条上的y2？

Question

我想改变SVG线的属性，并对过渡到新坐标的动画进行调整。

我正在使用reactjs更改此示例中y2的值：

<line stroke='green' x1='0' y1='50%' x2='100%' y2='25%'>

to

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

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

- brendangibson

---

在SVG 2中，你可以这样做，在SVG 1.1中则不行。目前只有Chrome/Opera支持SVG 2的这一部分。 - Robert Longson

@RobertLongson 谢谢。在SVG2中如何实现呢？有示例吗？ - brendangibson

根据你已有的语法来看，如果它不起作用可能是因为没有任何 UA 实现它。Firefox、IE 和 Safari 肯定还没有实现它。 - Robert Longson

我添加了一个jsfiddle来测试浏览器：https://jsfiddle.net/odfo6vov/ 甚至在Chrome中也无法工作 :( - brendangibson

注意：SVG2尚未提供x1、x2、y1、y2演示属性，请参见https://svgwg.org/svg2-draft/geometry.html。我认为WebKit（Safari）是第一个支持x、y、width、height、cx、cy、rx、ry和r作为属性的浏览器，而Blink（Chrome / Opera）则是第二个。 - Erik Dahlström

现在你唯一能做的就是使用stroke-dasharray，但你必须知道你的线条大小。stroke-dasharray是可过渡的。 - long-lazuli

Answer 1

使用JQuery的.attr()可以像fiddle 1中看到的那样将"y2"更改为"75%"。

但是，难点在于您想要使用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;
}

请查看可工作的演示。

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

- eylay