jquery attr 有效但动画失败

Question

我有一个 id='slope' 的 svg 行。我想通过改变 y1 和 y2 值来改变斜率。这很好用：

$('#slope').attr({y1:10});
$('#slope').attr({y2:30});

正如预期的那样，这条线改变了角度，所以它从 y=10 开始到 y=30 结束。但是，我无法为其设置动画。这给我一个错误，声称 y1 和 y2 是只读属性：

$('#slope').animate({y1:10});
$('#slope').animate({y2:30});

这是 jquery 中的错误还是 jquery 无法为一行的 y1 和 y2 设置动画。我用圆的 cx 和 cy 属性测试了它，它工作正常。所以，我知道 jquery 可以为 svg 元素的位置设置动画。出于某种原因，它无法按照我所看到的进行处理。

我正在使用 jquery 3.4.1，以防这是一个错误。

Answer 1

JQuery的animate的描述是：

Description: Perform a custom animation of a set of CSS properties.

而 SVG 线条的 x 和 y 属性正是 attributes。

A future specification may convert the ‘x1’, ‘y1’, ‘x2’, and ‘y2’ attributes to geometric properties. Currently, they can only be specified via element attributes, and not CSS.

它们不是 CSS 属性，因此 jQuery 不会为它们设置动画。如果你想为线条设置动画，你需要使用 SMIL 或 javascript（或内部使用 SMIL 或 javascript 的库）。

有点令人困惑的是，SVG 2 规范使圆的 cx 和 cy 映射了 CSS 属性而不是属性。在 SVG 1.1 中，它们也曾经是属性。

jquery attr 有效但动画失败

jquery attr works but animate fails

jquery

svg

jquery-animate