如何在反应功能组件中使用动画 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有效。