Я пытаюсь изменить начальную позицию изображения svg, чтобы анимировать его по пути, используя animateMotion
Вы можете проверить текущий результат здесь https://jsfiddle.net/7espvwuz/
В этой скрипке я использую круг, чтобы издеваться над своим изображением.
Проблема в
cx = 0
и cy = 0
, анимация начинается с неправильной позицииcx = 0
и cy = 100
, круг идеально позиционируется, но анимация смещается на значение 100
по оси y
.Что я делаю не так?
Вы можете присвоить кругу желаемые значения cx и cy (cx = "6.25" cy = "100"
) и set
эти атрибуты для o, когда начнется анимация.
Пожалуйста, прочитайте о установить элемент.
var currentIndex = 0;
const pathArray = [
"M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25",
"M25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25",
"M36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5",
"M68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75",
"M88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4"];
function buttonClick() {
set1.setAttribute("cx",6.25);
set1.beginElement();
set2.setAttribute("cy",100);
set2.beginElement();
motion1.setAttribute("path", pathArray[currentIndex]);
motion1.beginElement();
currentIndex++;
}
<button onclick = "buttonClick()">Click me</button>
<svg preserveAspectRatio = "xMidYMid meet" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 -10 450 120" style = "background-color: #0010ff3b;">
<path d = "M6.25 100 L6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4" stroke='black' strokeDasharray = "5, 5" fill='transparent'></path>
<circle id = "circle" r = "5" cx = "6.25" cy = "100" stroke = "black" stroke-width = "3" fill = "red" >
<set id = "set1" begin = "indefinite" attributeName = "cy" to = "0"></set>
<set id = "set2" begin = "indefinite" attributeName = "cx" to = "0"></set>
<animateMotion id = "motion1" begin = "indefinite" dur = "1s" fill = "freeze" path = "M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25">
</animateMotion>
</circle>
</svg>