У меня есть веб-приложение 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
Надеюсь, я правильно вас понимаю. Вы хотите импортировать файл 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.
Надеюсь, это поможет.
Я пробовал возиться с SVG и добавлять разные части, но все это выходит за рамки моей компетенции. Я предлагаю просто добавить css из одного из этих ответов напрямую в ваш файл index.css. В том же потоке был ответ, который не использовал JQuery здесь и получил аналогичный результат. Вы также можете попробовать скопировать и вставить CSS в их эквиваленты попутного ветра, но я считаю, что вам как минимум нужно использовать файл index.css для преобразований webkit. Надеюсь, кто-то может дать более полный ответ
В итоге я использовал стандартный 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))}*/
Что это в конечном итоге изображает (это вращается вокруг центрального круга, как и ожидалось):
Если кто-то хочет преобразовать index.css в TailwindCSS, не стесняйтесь.
Да, когда я реализую это так, как предлагает документация от SVGator, возникает серьезная ошибка с префиксом «Ошибка сборки модуля (из ./node_modules/@svgr/webpack/lib/index.js)»; видимо, это какая-то ошибка с ReactJS. Я все еще относительно новичок в Tailwind, но вот пример того, что я хотел бы отобразить в React, разумеется, там будет больше изображений и т. д.: stackoverflow.com/a/39021942/18241240