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的描述是：

描述：执行一组 CSS 属性的自定义动画。

而 SVG 线的 x 和 y 属性正是如此，attributes。

未来的规范可能会将“x1”、“y1”、“x2”和“y2”属性转换为几何属性。目前，它们只能通过元素属性来指定，而不是 CSS。

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

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