5

Есть два способа (другие не берем) создать анимацию в Web это SVG и CSS.

В чем заключается их принципиальная разница:

  1. Производительность (как браузеры рендерят их)
  2. Можно ли совмещать в одном приложении эти два вида анимации
  3. Как реализуется тайминг, есть ли отличия
  4. Какие есть преимущества и недостатки у каждого вида анимации

Aнимация CSS:

body {
  margin: 0;
  background: #E6E2D6;
}
.loader-container {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
  width: 100px;
  height: 100px;
  background: #BDE2E0;
  border-radius: 50%;
  border: 15px solid #D7695A;
  box-shadow: inset 0 0 15px rgba(0,0,0,.5);
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 30px;
  line-height: 100px;
  overflow: hidden;
}
@keyframes load {
  100% {
    transform: translateY(-1100px);
  }
}
.loader {
  animation: load 11s steps(11, end) infinite;
}
<div class="loader-container">
  <div class="loader">
    <span>0%</span>
    <span>10%</span>
    <span>20%</span>
    <span>30%</span>
    <span>40%</span>
    <span>50%</span>
    <span>60%</span>
    <span>70%</span>
    <span>80%</span>
    <span>90%</span>
    <span>100%</span>
  </div>
</div>

Aнимация SVG:

#circle1 {
  animation-name: cirlce1;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

#circle2 {
  animation-name: cirlce2;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes cirlce1 {
  from {
    cy: 0%;
    fill: none;
    stroke: grey;
  }
  to {
    cy: 50%;
    fill: #9284D9;
    stroke: white;
  }
}

@keyframes cirlce2 {
  from {
    cx: 100%;
    fill: none;
    stroke: grey;
  }
  to {
    cx: 52%;
    fill: #9284D9;
    stroke: white;
  }
}
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  
  <ellipse id="circle1" stroke="#000" ry="119.5" rx="123.5" id="svg_6" cy="193.5" cx="298" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="#fff"/>
  <ellipse id="circle1" stroke="#000" ry="87" rx="93.00001" id="svg_9" cy="197" cx="300.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <ellipse id="circle2" stroke="#000" ry="63" rx="64.5" id="svg_11" cy="197" cx="302" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  <ellipse id="circle2" stroke="#000" ry="38" rx="37" id="svg_13" cy="198" cx="302.5" fill-opacity="null" stroke-opacity="null" stroke-width="3" fill="none"/>
  
 </g>
</svg>

0

1 ответ 1

10

Анимация CSS, точно так же, как и фильтры , градиенты появились намного позже, чем аналогичные разделы в SVG.
И до настоящего момента в CSS не реализовано в полной мере всё то, что возможно сделать в SVG.

Например анимацию кривых Безье, как и других кривых, возможно реализовать только с помощью SMIL SVG.

Правда в последнее время Chrome пытается реализовать это. Но пока это, всего лишь экспериментальные технологии, которые не задокументированы в W3C и поэтому, эти решения не кроссбраузерны.

Пример анимации кривых Безье

Более интересно выглядит в полно экранном режиме

Анимация ссылки в форме волны

<style>
  svg {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
  background-size:cover;
  width:50%
  height:50%
  }
 </style>
  
 <svg   viewBox="0 0 650 500">
	
<defs> 
 <path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:teal;fill-opacity:0.3;stroke-width:3;fill:none">
<animate begin="0.5s"  dur="10s" restart="whenNotActive"  attributeName="d" 
values="M100 200Q200,200 300,200 T500,200;
M100 200Q200,100 300,200 T500,200;
M100 200Q200,200 300,200 T500,200;
M100 200Q200,300 300,200 T500,200;
M100 200Q200,200 300,200 T500,200"/> 
</path>

</defs>
<text text-anchor="middle" font-size="25" fill="#026282">
  <textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-20">So easy to do with SVG just  few lines</tspan></textPath>
<animate
 begin="animLink.mouseover"
 dur="10s"
 repeatCount="indefinite"
 attributeName="fill"
 values="red;green;red;green;red"/>
</text>
<use xlink:href="#Lsvg" transform="translate(0 -10)"/>
   
  <rect id="animLink" x="100" y="150" width="400" height="60" fill="#E0E0E0" fill-opacity="0.01" stroke="none" />  

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

Ещё один пример анимации атрибута d у path

  • Анимация SVG работает во всех современных браузерах, кроме IE, Edge
  • В CSS работает только в экспериментальных технологиях Chrome

Преобразование иконки Wordpress - Twitter

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  width="126" height="126" viewBox="0 0 126 126" >
  <path id="wordpress" fill="none" stroke="black" stroke-dasharray="1150" stroke-dashoffset="0" d="M113.5 57.7l-8.5-11.4 -2.5-14c-0.8-4.3-4.3-7.7-8.6-8.3L79.8 22.1l-11.7-8.1c-2.9-2-6.6-2.4-9.9-1 -0.7 0.3-1.4 0.7-2 1.2l-11.4 8.5 -14 2.5c-0.8 0.1-1.5 0.4-2.3 0.7 -3.2 1.4-5.5 4.4-6 7.9L20.5 48l-8.1 11.7c-2.5 3.6-2.4 8.4 0.2 12l8.5 11.4 2.5 14c0.8 4.3 4.3 7.7 8.6 8.3l14.1 2 11.7 8.1c2.9 2 6.7 2.4 9.9 1 0.7-0.3 1.4-0.7 2-1.2l11.4-8.5 14-2.5c0.8-0.1 1.5-0.4 2.3-0.7 3.2-1.4 5.5-4.4 6-7.9l2-14.1 8.1-11.7C116.3 66 116.2 61.2 113.5 57.7M63.1 102c-20.6 0-37.4-16.8-37.4-37.4s16.8-37.4 37.4-37.4 37.4 16.8 37.4 37.4S83.7 102 63.1 102 M63.7 67.6L53.5 97.3c3.1 0.9 6.3 1.4 9.6 1.4 4 0 7.8-0.7 11.3-1.9 -0.1-0.1-0.2-0.3-0.2-0.5L63.7 67.6M80.2 94.1c10.1-5.9 16.9-16.9 16.9-29.5 0-5.9-1.5-11.5-4.2-16.4 0.2 1.1 0.2 2.3 0.2 3.5 0 3.5-0.6 7.3-2.6 12.2L80.2 94.1M29 64.6c0 13.5 7.8 25.2 19.2 30.7L31.9 50.8C30.1 55 29 59.7 29 64.6M86.1 62.9c0-4.2-1.5-7.1-2.8-9.4 -1.7-2.8-3.3-5.2-3.3-8 0-3.1 2.4-6 5.7-6 0.1 0 0.3 0 0.4 0 -6.1-5.6-14.1-9-23-9 -11.9 0-22.4 6.1-28.5 15.4 0.8 0 1.6 0 2.2 0 3.6 0 9.1-0.4 9.1-0.4 1.8-0.1 2.1 2.6 0.2 2.8 0 0-1.8 0.2-3.9 0.3l12.4 36.9 7.5-22.4L56.8 48.7c-1.8-0.1-3.6-0.3-3.6-0.3 -1.8-0.1-1.6-2.9 0.2-2.8 0 0 5.6 0.4 9 0.4 3.6 0 9.1-0.4 9.1-0.4 1.8-0.1 2.1 2.6 0.2 2.8 0 0-1.8 0.2-3.9 0.3l12.3 36.6 3.4-11.4C85.2 69.5 86.1 65.8 86.1 62.9">
  
   <animate
   attributeName="fill"
   begin="0s"
   values="black;white"
   dur="2s"
   fill="freeze"  />
    <animate
    attributeName="stroke-dashoffset"
    begin="2s"
    values="0;1150"
    dur="2s"
    fill="freeze"  />
   
   </path>

    <path id="twitter" fill="none" stroke="black" stroke-dasharray="948" stroke-dashoffset="948" d="M113.5 57.6l-8.5-11.4 -2.5-14c-0.8-4.3-4.3-7.7-8.6-8.3L79.8 21.9l-11.7-8.1c-2.9-2-6.6-2.4-9.9-1 -0.7 0.3-1.4 0.7-2 1.2l-11.4 8.5 -14 2.5c-0.8 0.1-1.5 0.4-2.3 0.7 -3.2 1.4-5.5 4.4-6 7.9l-2 14.1 -8.1 11.7c-2.5 3.6-2.4 8.4 0.2 12l8.5 11.4 2.5 14c0.8 4.3 4.3 7.7 8.6 8.3l14.1 2 11.7 8.1c2.9 2 6.7 2.4 9.9 1 0.7-0.3 1.4-0.7 2-1.2l11.4-8.5 14-2.5c0.8-0.1 1.5-0.4 2.3-0.7 3.2-1.4 5.5-4.4 6-7.9l2-14.1 8.1-11.7C116.3 65.9 116.2 61.1 113.5 57.6zM63.1 101.9c-20.6 0-37.4-16.8-37.4-37.4 0-20.6 16.8-37.4 37.4-37.4s37.4 16.8 37.4 37.4C100.4 85.1 83.7 101.9 63.1 101.9zM63.1 30.7c-18.7 0-33.8 15.2-33.8 33.8 0 18.7 15.2 33.8 33.8 33.8 18.7 0 33.8-15.2 33.8-33.8C96.9 45.9 81.7 30.7 63.1 30.7zM78.5 85.4c-2.1 1-4 1.7-5.7 2.1s-3.5 0.6-5.5 0.6c-2.2 0-3.6-0.3-5.3-0.8 -1.7-0.6-3.2-1.4-4.4-2.4 -1.2-1.1-2.1-2.2-2.5-3.4 -0.5-1.2-0.7-2.9-0.7-5.2V59.1h-6.7v-7c1.9-0.6 4.2-1.5 5.6-2.7 1.4-1.2 2.5-2.6 3.3-4.2 0.8-1.6 1.4-3.7 1.7-6.3h7v11.4h11.4v8.8H65.2v12.6c0 2.9 0 4.5 0.3 5.3 0.3 0.8 1.1 1.6 1.9 2.1 1.1 0.7 2.3 1 3.7 1 2.5 0 5-0.8 7.4-2.4V85.4z">
  
  <animate id="tw"
  attributeName="stroke-dashoffset"
  begin="3s"
  values="948;0"
  dur="3s"
  fill="freeze" />
   <animate
   attributeName="fill"
   begin="tw.end-1s"
   values="white;black"
   dur="2s"
   fill="freeze"  />
  </path>
   
   </svg>

Второе важное отличие анимаций CSS vs SVG - организация тайминга , расчета времени запуска, продолжения, очередности последовательных и параллельных анимаций

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

Ниже простой пример для расчёта delay, но представьте, если бы логика запуска анимаций была не последовательная, как в примере, а намного сложнее, то тогда расчет тайминга увеличился бы по сложности в геометрической прогрессии и объем кода тоже бы сильно возрос.

path {
    stroke: #ccc;
    stroke-width: 5px;
    animation: appear .3s 1;
    animation-fill-mode: forwards;
}

path:nth-child(1), 
path:nth-child(2) { animation-delay: .1s }      
path:nth-child(3) { animation-delay: .2s }      
path:nth-child(4) { animation-delay: .3s }      
path:nth-child(5) { animation-delay: .4s }      
path:nth-child(6) { animation-delay: .5s }      
path:nth-child(7) { animation-delay: .6s }  

g{fill:none;animation: fill 1s 1 .7s forwards; }
  

@keyframes appear { 
    from { opacity:0; } 
    to { opacity:1; } 
}

@keyframes fill {
    from { fill: none; }
    to { fill: #f00; }
}

<svg viewBox="0 0 120 30">
  <g>
  <path d="M10,11h8v8h-8z"/>
  <path d="M25,11h8v8h-8z"/>
  <path d="M40,11h8v8h-8z"/>
  <path d="M55,11h8v8h-8z"/>
  <path d="M70,11h8v8h-8z"/>
  <path d="M85,11h8v8h-8z"/>
  <path d="M100,11h8v8h-8z"/>
  </g>
</svg>
<style>
path {
    stroke: #ccc;
    stroke-width: 5px;
    animation: appear .3s 1;
    animation-fill-mode: forwards;
}

path:nth-child(1), 
path:nth-child(2) { animation-delay: .1s }      
path:nth-child(3) { animation-delay: .2s }      
path:nth-child(4) { animation-delay: .3s }      
path:nth-child(5) { animation-delay: .4s }      
path:nth-child(6) { animation-delay: .5s }      
path:nth-child(7) { animation-delay: .6s }  

g{fill:none;animation: fill 1s 1 .7s forwards; }
  

@keyframes appear { 
    from { opacity:0; } 
    to { opacity:1; } 
}

@keyframes fill {
    from { fill: none; }
    to { fill: #f00; }
}
</style>
<svg viewBox="0 0 120 30">
  <g>
  <path d="M10,11h8v8h-8z"/>
  <path d="M25,11h8v8h-8z"/>
  <path d="M40,11h8v8h-8z"/>
  <path d="M55,11h8v8h-8z"/>
  <path d="M70,11h8v8h-8z"/>
  <path d="M85,11h8v8h-8z"/>
  <path d="M100,11h8v8h-8z"/>
  </g>
</svg>

SMILL SVG в реализации алгоритмов анимации намного мощнее и гибче

  1. Расчет тайминга, как в CSS, но есть очень полезные отличия:

    • Время запуска для определенной анимации begin="1s" (как в CSS)
    • Несколько запусков одной анимации в разные период времени - `begin="1s;7s;15;59s"
  2. Создание логических цепочек запуска
    Не надо ничего рассчитывать, логику можно поменять в любой момент настройки приложения.
    Можно написать так - begin="an.end+5s" - это означает, что данная анимация начнется через 5 секунд после окончания анимации - id="an"

begin="an2.begin+5s" - запуск анимации через 5s после запуска анимации c id="an2", такое условие можно написать для одной или нескольких анимаций

end="an2.end+1s" - окончание данной анимации, через 1s после окончания анимации с id="an2

Для одной анимации можно писать два условия начала - begin и окончания end

Также можно повторить одну анимацию несколько раз repeatCount="5"

или запустить анимацию после нескольких повторов предыдущей анимации begin="an3.repeat(10)"

Можно сделать паузу в выполнении анимации и вновь её запусить - с помощью повторения значений values="0;1850;1850;0"

Ниже пример последовательно-параллельных анимаций SVG
Последовательно рисуется тело, глаз. Параллельно рисуются усики крыски, после окончания рисования глаза

var btn = document.getElementById('btn1');
btn.addEventListener("click",() =>{
  an_body.beginElement();
})
<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
	fill:none;
	stroke:black;
	stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}

</style>
 <rect width="100%" height="100%" fill="#D6DFE6" />
  <path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
      <animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="indefinite" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
      <animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="an_body.end" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
  
  </path>
  <path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
      <animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
	    values="0 110;110 0" fill="freeze" restart="whenNotActive" />
  </path>	   
  <path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
       <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
	    values="0 157;157 0" fill="freeze" restart="whenNotActive" />
  </path>	   
  <path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
      <animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end" 
	    values="0 159;159 0" fill="freeze" restart="whenNotActive" />
  </path>	 
      
</svg>

Недостаток у SMIL SVG анимаций один, браузеры в отличии от CSS не кешируют процесс анимаций. Поэтому анимации CSS работают более гладко по сравнению с SVG.

Note
Не стоит смешивать в одном файле анимации CSS и SMIL. Анимации могут идти рывками. Точно те же анимации по отдельности работают прекрасно, если сделаны чисто в SVG или CSS/

Какие преимущества есть у CSS анимации перед SMIL SVG?

  1. При трансформациях SVG: scale, skew необходимо учитывать, что начало координат находится в левом верхнем углу холста и при увеличении, например в 2 раза scale(2) это расстояние тоже увеличится в два раза и элемент сдвинется вправо и вниз. Поэтому его необходимо возвращать на место с помощью translate(x,y)

введите сюда описание изображения

  1. При вращении SVG - rotate(angle, x.y) кроме угла необходимо указывать координаты центра фигуры. Что бывает довольно проблематично или необходимо определить его с помощью JS getBBox()

С введением в CSS правил : transform-origin` и transform-box эти проблемы SVG решаются очень просто.

  1. Кроме того в SMIL анимация жестко привязывается только к одному объекту.
    в CSS с этим тоже нет проблем,- одна анимация может быть привязана к одному или нескольким объектам, имеющим одинаковый класс, например class="my-spin"

Посмотрите пример ниже, где разные элементы вращаются одной анимационной командой и центр вращения определяется автоматически для каждой фигуры.

.my-spin {
    transform-box: fill-box;
    animation: spin 2s linear infinite;
transform-origin:50% 50%;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% {  transform: rotate(359deg); }
}
<svg  xmlns="http://www.w3.org/2000/svg"   width="1800" height="1200"  viewBox="500 150 951.7 589.2" 
style="border:1px solid red"> 
 
		<polygon id="star" class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
 		
 		<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
		
		 <polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
		 <polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
		
		<polygon class="my-spin" points="700 250 750 200 800 250"  fill="green"/> 
		
		<rect class="my-spin" fill="purple"  x="600" y="190" width="40" height="60"  /> 
		   
    </svg>

9
  • И до настоящего момента в CSS не реализовано в полной мере всё то, что возможно сделать в SVG. и наоборот в svg нет 3д трансформов которые есть в css 27 дек 2019 в 9:36
  • @StrangerintheQ я ещё не осваивал, но видел, что с помощью матриц возможно это делать 27 дек 2019 в 9:37
  • @Alexandr_TT я правильно понимаю так как css быстро развивается а svg как черепаха то в будущем css по возможностям перегонит svg ?
    – Leks
    27 дек 2019 в 9:51
  • @Leks Это вряд ли Так как уже сейчас видно, что уже сделали в CSS по фильтрам их в разы меньше, чем в SVG Те же анимации у SVG можно анимировать практически любой параметр атрибута у CSS всё далеко не так. Так по той же системе таймингов у CSS видно, что она не обладает той же мощью, как у SVG/ Сейчас хоть перестали писать про SMIL depricate потому что поняли, что полноценно заменить нечем пока. Я не понимаю почему в этой ситуации не развивают SVG, а пытаются завести CSS на его поле. SVG создан для графики, а CSS для разметки 27 дек 2019 в 10:00
  • 1
    @Alexandr_TT благодарю за ответы на вопросы ...
    – Leks
    27 дек 2019 в 13:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.