Ищу анимированный SVG с помощью CSS

ProgramBox

Ищу анимированный SVG с помощью CSS

Post author:admin
Запись опубликована:28 марта, 2023
Post category:Вопросы по программированию

#html #css #animation #svg

#HTML #css #Анимация #svg

Вопрос:

Я хочу анимировать свой значок SVG. Уже сделал это, но я чего-то не хватает. Я новичок в animation в CSS.

Проблема в том, что позиция SVG не на месте, когда кто-то заходит на веб-сайт. Кроме того, когда SVG выполняет анимацию (анимацию наведения), это выглядит так, как если бы размер SVG «div» полностью изменился и был повторно масштабирован.

Как я могу придать SVG исходную форму «креста» и заставить его вращаться вокруг своей оси без потери основных размеров?

 #logo{
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    animation-play-state: paused;
}
    
svg:hover #logo{
    animation-play-state: running;
}

@keyframes spin{
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

 <div class="logo">
  <svg  width="35px" height="35px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
     <g>
        <rect id="logo" x="16.57" y="-4.86" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="6.86" height="49.71"/>
     </g>
     <g>
        <rect id="logo" x="-4.86" y="16.57" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -8.2843 20)" width="49.71" height="6.86"/>
     </g>
   </svg>  
</div>

Ответ №1:

Вот пример. В основном я удалил преобразование и работал только с шириной / высотой и математикой x / y.

По сути, вы создаете окно просмотра нужного вам размера. Я оставил его равным 80 80, так как он был на приличный размер больше ширины прямоугольников. Вы можете играть с этими числами по своему усмотрению. Хитрость здесь заключается в вычислении осей x и y.

x = viewboxX/2 — width /2

y = viewBoxX/2 — width/2

Как только я понял это, то для второго квадрата я просто изменил ширину на высоту, а x на y, и вы получили свой крест

 #logo{
            animation-name: spin;
            animation-duration: 4000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center;
            animation-play-state: paused;
            }

            svg:hover #logo{
            animation-play-state: running;}

            @keyframes spin{
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }}

   <div class="logo">
            <svg width="100px" height="100px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="40px" y="40px" viewBox="0 0 80 80" style="enable-background:new 0 0  40 40;" xml:space="preserve">
             <g id="logo">
                <rect x="15.14" y="36.57" width="49.71" height="6.86"/>
                <rect x="36.57" y="15.14" width="6.86" height="49.71"/>
             </g>          
            </svg> 
         </div>

1. Большое вам спасибо! Я думаю, проблема заключалась в том, что я создал SVG с помощью Illustrator, и он установил эти параметры, потому что я использовал два разных слоя при создании векторов для прямоугольников, в дополнение к добавлению параметров «преобразования». Это действительно сработало, большое спасибо!

2. Кроме того, я думаю, вы упустили из виду неправильное использование id s в коде. Вы не можете установить один и тот же идентификатор для нескольких элементов. Вместо этого используйте классы

3. @Sapinder да, я добавил идентификатор в группу и забыл удалить их из svg. Но, как вы сказали, в этом случае также помог бы класс. Обновлен приведенный выше пример кода.

Ответ №2:

Отметьте Эдварда его ответ как правильный

SVG можно очистить от всех устаревших атрибутов.

Замените rect на один путь, и вы сможете использовать viewBox и d= path для игры с размерами (вы не можете использовать процент % в пути)

Я немного переписал его, чтобы указать, что вы анимируете не сам SVG, а только один элемент внутри него.

 svg {
  background: lightgreen;
  width: 200px;
}

svg path {
  animation: spin 4s linear infinite paused;
  transform-origin: center;
}

svg:hover path {
  animation-play-state: running;
}

@keyframes spin {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
  <rect x="25%" width="50%" y="25%" height="50%" fill="green"/>
  <path d="M4 1v6m3-3h-6" stroke="red"/>
 </svg>