Как изменить начальную позицию изображения svg с помощью animateMotion?

Я пытаюсь изменить начальную позицию изображения svg, чтобы анимировать его по пути, используя animateMotion

Вы можете проверить текущий результат здесь https://jsfiddle.net/7espvwuz/

В этой скрипке я использую круг, чтобы издеваться над своим изображением.

Проблема в

  • если я использую cx = 0 и cy = 0, анимация начинается с неправильной позиции
  • если я использую cx = 0 и cy = 100, круг идеально позиционируется, но анимация смещается на значение 100 по оси y.

Что я делаю не так?

Создание фильтров для вашего сайта
Создание фильтров для вашего сайта
Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
1
0
10
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете присвоить кругу желаемые значения 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>

Другие вопросы по теме