如何在反應功能組件中使用動畫 svg？

Question

我想使用反應將 animation 添加到 svg 中。

我想做什么？ 我有一個 animation svg 如下代碼，

<svg id="something">
    <g>
        <path>
        <script>
            //some script
        </script>
    </svg>

我在下面的功能組件中使用了此代碼，

function AnimatedIcon() {
    return (
        <svg>
            <g>
                <path>
            </g>
            <script>
                //some script
           </script>
       </svg>

但這給了我一個錯誤的意外標記。

我不確定它為什么會給出這個錯誤。

如何在渲染時將此腳本移動到 function。 有人可以幫我解決這個問題。 謝謝。

我是反應和動畫的新手。 有人可以幫我解決這個問題。 謝謝。

Answer 1

看起來您缺少路徑的結束標記。

<svg>
  <path/>
  <g>{/* <path> */}</g>     
  <script>//some script</script>
</svg>

Answer 2

Ciao，似乎您沒有關閉標簽<path> 。 嘗試像這樣修改您的代碼：

    <svg>
      <g>
        <path />
      </g>
      <script>{/*some script */}</script>
    </svg>

無論如何，我認為您專注於如何在 React 中為 svg 設置動畫。 這是一個工作示例。 假設您有這個svg 並且您想要為它制作動畫。

首先我們看到來自react-samy-svg 的Samy標簽。 它只是一個在 React 中更好地管理 svg 的庫。

然后，下一個標簽是來自react-move的Animate標簽。 這是我們用來為圖像設置動畫的標簽。 在我的示例中，此標簽有 2 個道具：

1. start ：返回起始 state 的 function。 function 傳遞了數據和索引，並且必須返回 object。
2. update ：一個 function 返回一個 object 或描述 state 應如何在更新時轉換的對象數組。 function 傳遞數據和索引。

因此，正如您在我的示例中看到的， start prop 中的元素設置為 0：

start={() => ({
   y: 0
})}

相反， update元素設置為 state 變量（這意味着它會在某處發生變化）：

update={() => ({
   y: bodyY
})}

現在神奇的是：在Animate標簽中，我們為要動畫化的機器人圖像的每個部分定義了一個SvgProxy標簽。 使用selector道具，我們得到了我們想要動畫的 html 元素，使用transform道具，我們將移動應用於該 htlm 元素（當然還有他的孩子）。

因此，例如，如果我們要移動機器人主體（具有 html id="core"），我們會這樣寫：

<SvgProxy
   selector="#core"  //select body
   transform={`translate(0 ${data.y})`} //move body with css translate
/>

是的，但誰設置data.y來進行翻譯？ 讓我們看看useEffect鈎子。 在里面我們發現了這樣一個setInterval function ：

setInterval(() => {
    let result = jump();
    setbodyY(result.bodyY);
 }, 500);

這意味着，每 500 毫秒setInterval調用setbodyY ，因此每 500 毫秒setInterval設置組件的 state。 什么是jump ？ 是一個 function，它返回一個值以存儲到 state。

const jump = () => {
   return { bodyY: Math.random() * 10 - 10 };
};

如您所見， jump返回bodyY的隨機值。 如果你 go 回到Animate標簽的update道具，你會看到：

y: bodyY,

簡而言之，這意味着：“每 500 毫秒設置機器人身體 y 坐標值 Math.random() * 10 - 10”。

同樣的解釋對arm1和arm2有效。