jquery attr работает, но анимация не работает

Question

У меня есть строка svg с id = 'slope'. Я хочу изменить наклон, изменив значения 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 свойств.

В то время как атрибуты x и y строки SVG в точности соответствуют, атрибуты .

Будущая спецификация может преобразовать атрибуты 'x1', 'y1', 'x2' и 'y2' в свойства geometryri c. В настоящее время они могут быть указаны только через атрибуты элемента, но не CSS.

Они не являются CSS свойствами и поэтому jQuery не будут их анимировать. Если вы хотите анимировать строки, вам нужно использовать SMIL или javascript (или библиотеку, которая использует SMIL или javascript).

Спецификация SVG 2 несколько сбивает с толку сделал cx и cy отображенные свойства круга CSS, а не атрибуты. В SVG 1.1 они тоже были атрибутами.