你能在 SVG 属性上使用 CSS 过渡吗？像 y2 一样？

Posted 2023-03-06

【中文标题】你能在 SVG 属性上使用 CSS 过渡吗？像 y2 一样？

【英文标题】：Can you use CSS transitions on SVG attributes? Like y2 on a line?

【发布时间】：2015-11-11 14:12:21

【问题描述】：

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

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

【问题讨论】：

在 SVG 2 中可以，在 SVG 1.1 中则不能。目前只有 Chrome/Opera 支持 SVG 2 的这一部分。

@RobertLongson 谢谢。你如何在 SVG2 中做到这一点？有什么例子吗？

按照您已有的语法。如果它不起作用，可能还没有 UA 实现它。 Firefox、IE 和 Safari 肯定没有。

我添加了一个 jsfiddle 来测试浏览器：jsfiddle.net/odfo6vov 甚至不能在 Chrome 中工作:(

注意：SVG2 还没有制作 x1, x2, y1, y2 表示属性，参见svgwg.org/svg2-draft/geometry.html。我认为 WebKit(Safari) 最先支持 x、y、width、height、cx、cy、rx、ry 和 r 作为属性，其次是 Blink(Chrome/Opera)。

【参考方案1】：

使用 JQuery .attr() 将 "y2" 更改为 "75%" 就像您在 fiddle 1 中看到的一样

但困难的部分是你想使用transition。

在这种情况下你必须使用transform:matrix():

HTML：

<svg  >
  <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() 中的一些数字来提供您的结果。