Анимированный SVG в React

У меня есть веб-приложение React, использующее Tailwind CSS, и я пытаюсь импортировать предварительно анимированный файл SVG, который я получил из SVGator, однако при импорте файла сразу возникает массовая ошибка. Как лучше всего импортировать предварительно анимированные файлы 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: https://stackoverflow.com/a/39021942/18241240

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Надеюсь, я правильно вас понимаю. Вы хотите импортировать файл SVG из svgator в свое приложение для реагирования.

Вот решение, которое я нашел для вашей проблемы в svgator документация

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;

Я также являюсь разработчиком, использующим попутный ветер, и, как я полагаю, сделал 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 крутится из-за класса анимировать-вращение от попутного ветра и в итоге выглядит как анимация загрузки. Не уверен, что это может помочь вам, но это больше подход «сделай сам». Я полагаю, что все эти д в компоненте пути связаны с графикой Adobe. Я просто использовал те, что есть в документации tailwindCSS.

Надеюсь, это поможет.

Да, когда я реализую это так, как предлагает документация от SVGator, возникает серьезная ошибка с префиксом «Ошибка сборки модуля (из ./node_modules/@svgr/webpack/lib/index.js)»; видимо, это какая-то ошибка с ReactJS. Я все еще относительно новичок в Tailwind, но вот пример того, что я хотел бы отобразить в React, разумеется, там будет больше изображений и т. д.: stackoverflow.com/a/39021942/18241240

guyman 31.03.2022 03:17

Я пробовал возиться с SVG и добавлять разные части, но все это выходит за рамки моей компетенции. Я предлагаю просто добавить css из одного из этих ответов напрямую в ваш файл index.css. В том же потоке был ответ, который не использовал JQuery здесь и получил аналогичный результат. Вы также можете попробовать скопировать и вставить CSS в их эквиваленты попутного ветра, но я считаю, что вам как минимум нужно использовать файл index.css для преобразований webkit. Надеюсь, кто-то может дать более полный ответ

daedadev 31.03.2022 03:59
Ответ принят как подходящий

В итоге я использовал стандартный CSS для реализации этого, я опубликую его здесь на случай, если кто-то захочет использовать (он сильно изменен):

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))}*/

Что это в конечном итоге изображает (это вращается вокруг центрального круга, как и ожидалось):

image

Если кто-то хочет преобразовать index.css в TailwindCSS, не стесняйтесь.

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