如何使用animateMotion更改svg影像的起始位置？-有解無憂

我正在嘗試更改 svg 影像的起始位置以使用它沿路徑對其進行影片處理animateMotion

您可以在此處查看當前結果https://jsfiddle.net/7espvwuz/

在這個小提琴中，我使用一個圓圈來模擬我的形象。

問題是

如果我使用cx = 0and cy = 0，影片從錯誤的位置開始
如果我使用cx = 0and ，則圓的位置完美，但影片在軸cy = 100中移動了的值。100y

我究竟做錯了什么？

uj5u.com熱心網友回復：

您可以在影片開始時為圓指定所需的 cx 和 cy ( cx="6.25" cy="100") 以及seto 的這些屬性。

請閱讀set 元素。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476961.html

標籤：svg svg-动画 svg.js

上一篇：如何使用react和Tailwindcss將svg影像作為背景影像？