Не получается сделать анимация на svg

Question

Можно ли сделать так, чтобы svg крутилась в середине и находилась в одной точке
Уточнение: нельзя закидывать svg в div ( или другой тег ) и через него прописывать анимацию, нужно чтобы находилось в теге svg ))

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450">
    <style>
        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <g>
        <g style="animation: rotate 1s infinite linear; width: 250px;">
            <path d="M203.5,0C91.11,0,0,91.11,0,203.5S91.11,407,203.5,407,407,315.89,407,203.5,315.89,0,203.5,0Zm0,400.93c-109,0-197.43-88.39-197.43-197.43S94.47,6.07,203.5,6.07,400.93,94.47,400.93,203.5,312.54,400.93,203.5,400.93Z"/>
            <path d="M132.59,278.34,273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8Z"/>
            <path d="M204.53,306.18,373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23Z"/>
            <path d="M276.58,128.41l-140-95.67a184.18,184.18,0,0,1,121-4.47l.12.43Z"/>
            <path d="M364.46,115.61l-.4.41L307,200.11,275.74,34.93A184.14,184.14,0,0,1,364.46,115.61Z"/>
            <path d="M386.86,203.5a183.19,183.19,0,0,1-7.51,52.09l-.39-.06L276.71,275.45,372.94,133.3A182.76,182.76,0,0,1,386.86,203.5Z"/>
            <path d="M373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23-86-58.34Z"/>
            <path d="M273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8-18.49-100Z"/>
            <path d="M133.12,372.86a182.82,182.82,0,0,1-89.63-80.13l.43-.59,58.14-88Z"/>
            <path d="M129.53,131.62,34.69,275.18A182.61,182.61,0,0,1,20.14,203.5a179.12,179.12,0,0,1,7.69-51.92l.94-.22Z"/>
            <path d="M202.25,99.88,35.19,132.59l-.74-.22a184.09,184.09,0,0,1,83.33-91Z"/>
        </g>
        
    </g>
</svg>

Answer 1

Я не знаю, подойдёт ли вам моё решение, но могу предложить вот что:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        body{
            display: flex;
            justify-content: center;
            height: 100vh;
            width: 100vw;
            align-items: center;
        }
        .con{
            height:50%;
            width: 50%;
        }
        #icon{
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
            align-items: center;
        }
    </style>
    <div class="con">
        <style>
            @keyframes rotate {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
        <svg id="icon" style="animation: rotate 1s infinite linear;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450">
            <g>
                <g >
                    <path d="M203.5,0C91.11,0,0,91.11,0,203.5S91.11,407,203.5,407,407,315.89,407,203.5,315.89,0,203.5,0Zm0,400.93c-109,0-197.43-88.39-197.43-197.43S94.47,6.07,203.5,6.07,400.93,94.47,400.93,203.5,312.54,400.93,203.5,400.93Z"/>
                    <path d="M132.59,278.34,273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8Z"/>
                    <path d="M204.53,306.18,373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23Z"/>
                    <path d="M276.58,128.41l-140-95.67a184.18,184.18,0,0,1,121-4.47l.12.43Z"/>
                    <path d="M364.46,115.61l-.4.41L307,200.11,275.74,34.93A184.14,184.14,0,0,1,364.46,115.61Z"/>
                    <path d="M386.86,203.5a183.19,183.19,0,0,1-7.51,52.09l-.39-.06L276.71,275.45,372.94,133.3A182.76,182.76,0,0,1,386.86,203.5Z"/>
                    <path d="M373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23-86-58.34Z"/>
                    <path d="M273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8-18.49-100Z"/>
                    <path d="M133.12,372.86a182.82,182.82,0,0,1-89.63-80.13l.43-.59,58.14-88Z"/>
                    <path d="M129.53,131.62,34.69,275.18A182.61,182.61,0,0,1,20.14,203.5a179.12,179.12,0,0,1,7.69-51.92l.94-.22Z"/>
                    <path d="M202.25,99.88,35.19,132.59l-.74-.22a184.09,184.09,0,0,1,83.33-91Z"/>
                </g>

            </g>
        </svg>
    </div>
</body>
</html>

единственное что анимация немного "шатается"

Answer 2

Я посмотрел более внимательно и похоже что сама картинка svg нарисована не в середине холста. Я вам рекомендую с помощью тех же онлайн редакторов разместить все элементы svg в центер. Сам холст в в моём коде двигался в центре страницы. Всё синее - это сам холст svg

Answer 3

Вот готовый код:

<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5</title>
 </head>
 <body>
  <svg style="animation: rotate 1s infinite linear;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <style>
        @keyframes rotate {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
  <title>Layer 1</title>
  <g>
   <g>
    <path d="m250,46.5c-112.39,0 -203.5,91.11 -203.5,203.5s91.11,203.5 203.5,203.5s203.5,-91.11 203.5,-203.5s-91.11,-203.5 -203.5,-203.5zm0,400.93c-109,0 -197.43,-88.39 -197.43,-197.43s88.4,-197.43 197.43,-197.43s197.43,88.4 197.43,197.43s-88.39,197.43 -197.43,197.43z"/>
    <path d="m179.09,324.84l140.41,94.91a184.18,184.18 0 0 1 -122.25,5.89l0.37,-0.8l-18.53,-100z"/>
    <path d="m251.03,352.68l168.47,-32.65a184,184 0 0 1 -82.15,91.22l-0.31,-0.23l-86.01,-58.34z"/>
    <path d="m323.08,174.91l-140,-95.67a184.18,184.18 0 0 1 121,-4.47l0.12,0.43l18.88,99.71z"/>
    <path d="m410.96,162.11l-0.4,0.41l-57.06,84.09l-31.26,-165.18a184.14,184.14 0 0 1 88.72,80.68z"/>
    <path d="m433.36,250a183.19,183.19 0 0 1 -7.51,52.09l-0.39,-0.06l-102.25,19.92l96.23,-142.15a182.76,182.76 0 0 1 13.92,70.2z"/>
    <path d="m419.5,320.03a184,184 0 0 1 -82.15,91.22l-0.31,-0.23l-86,-58.34l168.46,-32.65z"/>
    <path d="m319.5,419.75a184.18,184.18 0 0 1 -122.25,5.89l0.37,-0.8l-18.49,-100l140.37,94.91z"/>
    <path d="m179.62,419.36a182.82,182.82 0 0 1 -89.63,-80.13l0.43,-0.59l58.14,-88l31.06,168.72z"/>
    <path d="m176.03,178.12l-94.84,143.56a182.61,182.61 0 0 1 -14.55,-71.68a179.12,179.12 0 0 1 7.69,-51.92l0.94,-0.22l100.76,-19.74z"/>
    <path d="m248.75,146.38l-167.06,32.71l-0.74,-0.22a184.09,184.09 0 0 1 83.33,-91l84.47,58.51z"/>
   </g>
  </g>
 </g>

</svg>
 </body>
</html>

Answer 4

Вращать лучше не весь svg, а только ту часть, которую необходимо вращать, в данном примере группу <g> которая обертывает все path.

Чтобы не было биения при вращении используйте для этой группы стили:

#circ {
transform-origin:center;
transform-box:fill-box;
animation:rot 1s linear infinite;
}

Красная рамка показывает границы svg холста, после настройки её можно удалить

style="border:1px solid red"

.container {
width:50vw;
height:auto;
}
#circ {
transform-origin:center;
transform-box:fill-box;
animation:rot 1s linear infinite;
}
@keyframes rot {
0%  {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450" style="border:1px solid red">
    
         <g id="circ" >
            <path d="M203.5,0C91.11,0,0,91.11,0,203.5S91.11,407,203.5,407,407,315.89,407,203.5,315.89,0,203.5,0Zm0,400.93c-109,0-197.43-88.39-197.43-197.43S94.47,6.07,203.5,6.07,400.93,94.47,400.93,203.5,312.54,400.93,203.5,400.93Z"/>
            <path d="M132.59,278.34,273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8Z"/>
            <path d="M204.53,306.18,373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23Z"/>
            <path d="M276.58,128.41l-140-95.67a184.18,184.18,0,0,1,121-4.47l.12.43Z"/>
            <path d="M364.46,115.61l-.4.41L307,200.11,275.74,34.93A184.14,184.14,0,0,1,364.46,115.61Z"/>
            <path d="M386.86,203.5a183.19,183.19,0,0,1-7.51,52.09l-.39-.06L276.71,275.45,372.94,133.3A182.76,182.76,0,0,1,386.86,203.5Z"/>
            <path d="M373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23-86-58.34Z"/>
            <path d="M273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8-18.49-100Z"/>
            <path d="M133.12,372.86a182.82,182.82,0,0,1-89.63-80.13l.43-.59,58.14-88Z"/>
            <path d="M129.53,131.62,34.69,275.18A182.61,182.61,0,0,1,20.14,203.5a179.12,179.12,0,0,1,7.69-51.92l.94-.22Z"/>
            <path d="M202.25,99.88,35.19,132.59l-.74-.22a184.09,184.09,0,0,1,83.33-91Z"/>
        </g>
  
</svg> 
</div>

Чтобы расположить пропеллер по центру svg, используйте transform="translate(20,20)"

.container {
width:50vw;
height:auto;
}
#circ {
transform-origin:center;
transform-box:fill-box;
animation:rot 1s linear infinite;
}
@keyframes rot {
0%  {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 450" style="border:1px solid">
    
    <g transform="translate(21,20)">
        <g id="circ" >
            <path d="M203.5,0C91.11,0,0,91.11,0,203.5S91.11,407,203.5,407,407,315.89,407,203.5,315.89,0,203.5,0Zm0,400.93c-109,0-197.43-88.39-197.43-197.43S94.47,6.07,203.5,6.07,400.93,94.47,400.93,203.5,312.54,400.93,203.5,400.93Z"/>
            <path d="M132.59,278.34,273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8Z"/>
            <path d="M204.53,306.18,373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23Z"/>
            <path d="M276.58,128.41l-140-95.67a184.18,184.18,0,0,1,121-4.47l.12.43Z"/>
            <path d="M364.46,115.61l-.4.41L307,200.11,275.74,34.93A184.14,184.14,0,0,1,364.46,115.61Z"/>
            <path d="M386.86,203.5a183.19,183.19,0,0,1-7.51,52.09l-.39-.06L276.71,275.45,372.94,133.3A182.76,182.76,0,0,1,386.86,203.5Z"/>
            <path d="M373,273.53a184,184,0,0,1-82.15,91.22l-.31-.23-86-58.34Z"/>
            <path d="M273,373.25a184.18,184.18,0,0,1-122.25,5.89l.37-.8-18.49-100Z"/>
            <path d="M133.12,372.86a182.82,182.82,0,0,1-89.63-80.13l.43-.59,58.14-88Z"/>
            <path d="M129.53,131.62,34.69,275.18A182.61,182.61,0,0,1,20.14,203.5a179.12,179.12,0,0,1,7.69-51.92l.94-.22Z"/>
            <path d="M202.25,99.88,35.19,132.59l-.74-.22a184.09,184.09,0,0,1,83.33-91Z"/>
        </g>
        
    </g>
</svg> 
</div>

БЛОГ НА HUSL

Не получается сделать анимация на svg

Ответы (4 шт):