React 中的动画 SVG

Question

我有一个使用 Tailwind CSS 的 React 网络应用程序，我正在尝试导入一个我从 SVGator 获得的预动画 SVG 文件，但是，该文件在导入时立即抛出一个巨大的错误。如果有合适的方法，导入预动画 SVG 文件的最佳方法是什么？

我想要制作动画的是一个带有图标的圆圈，该圆圈将完全围绕特定轴旋转，该轴是中心的图片。

这是圈子：

<div className='w-[5%] mx-20 self-center'>
  <div className='shadow-lg bg-gray-200 rounded-full'>
    <img className="w-15 mx-auto" src={images.react} alt="React icon" />
  </div>
</div>

我宁愿将预动画 SVG 导入网站，因为实施多个围绕相同半径旋转的圆可能会变得麻烦 CSS。

编辑：作为参考，我发现这个答案描述了我想在 React/Tailwind 中实现的粗略结构：

Answer 1

希望我理解正确。您想将 SVG 文件从 svgator 导入到您的 React 应用程序中。

这是我在 svgator 中为您的问题找到的解决方案 documentation

import React from 'react';
import ExampleSVG from './Example.svg';

function App() {
  return (
    <object type="image/svg+xml" data={ExampleSVG}>svg-animation</object>
  );
}
export default App;

我也是一名使用 tailwind 的开发人员，我相信我已经制作了与您所描述的类似的 SVG。

      <svg
        className="animate-spin h-10 w-10"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          className="opacity-40"
          cx={"12"}
          cy={"12"}
          r="10"
          stroke="#454545"
          stroke-width={"2"}
        ></circle>
        <path
          fill="#FFFFFF"
          className="opacity-75"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        ></path>
      </svg>

svg 由于来自顺风的 animate-spin class 旋转，最终它看起来像加载动画。不确定它是否可以帮助您，但这是一种更多的自己动手的方法。我相信路径组件中的所有 d 都链接到 adobe 图形。我只是使用了在 tailwindCSS 文档中找到的那些。

希望这对您有所帮助。

Answer 2

最后只使用标准 CSS 来实现它，我将 post 放在这里以防有人想使用它（它被广泛修改）：

ReactJS/TailwindCSS:

<div id="container" className='dark:bg-[#6052dd] bg-[#aaa0ff] transition ease-out duration-500'>
                    <div class="item">
                        <div className='rounded-[30%] shadow-lg w-[100%] py-[2px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.html} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.react} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.flutter} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.css} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.vue} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[0px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:dark:bg-[#aaa0ff] hover:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.redux} alt="HTML icon" />
                        </div>
                    </div>
                    <div class="item">
                        <div className='rounded-[30%] w-[100%] shadow-lg py-[1px] h-full bg-gray-200 dark:bg-[#353535] hover:scale-110 duration-500 hover:bg-[#aaa0ff] hover:dark:bg-[#aaa0ff] transition ease-out'>
                            <img className="w-[90%] my-1 mx-auto" src={images.firebase} alt="HTML icon" />
                        </div>
                    </div>
                </div>

index.css文件，其中包含实现旋转效果的实际过渡动画：

#container {
  --n:7;   /* number of item */
  --d:45s; /* duration */

  width: 500px;
  height: 500px;
  margin: 40px auto;
  display:grid;
  grid-template-columns:30px;
  grid-template-rows:30px;
  place-content: center;
  border-radius: 50%;
  /* background-color: #aaa0ff; */
}
.item {
  grid-area:1/3/3/1;
  box-shadow: 50px #000;
  line-height: 80px;
  text-align: center;
  align-self: center;
  width: 80px;
  height: 80px;
  border-radius: 30%;
  /* background: rgb(231, 231, 231); */
  animation: spin var(--d) linear infinite; 
  transform:rotate(0) translate(310px) rotate(0);
}
@keyframes spin {
  100% {
    transform:rotate(1turn) translate(310px) rotate(-1turn);
  }
}

.item:nth-child(1) {animation-delay:calc(-0*var(--d)/var(--n))}
.item:nth-child(2) {animation-delay:calc(-1*var(--d)/var(--n))}
.item:nth-child(3) {animation-delay:calc(-2*var(--d)/var(--n))}
.item:nth-child(4) {animation-delay:calc(-3*var(--d)/var(--n))}
.item:nth-child(5) {animation-delay:calc(-4*var(--d)/var(--n))}
.item:nth-child(6) {animation-delay:calc(-5*var(--d)/var(--n))}
.item:nth-child(7) {animation-delay:calc(-6*var(--d)/var(--n))}
/*.item:nth-child(N) {animation-delay:calc(-(N - 1)*var(--d)/var(--n))}*/

这最终描绘的是什么（如预期的那样围绕中心圆旋转）：

如果有人想将 index.css 转换为 TailwindCSS，请随意。

React 中的动画 SVG

Animated SVG in React

css

animation

svg

reactjs

tailwind-css