Блог

Главная - Вопросы по программированию - как повернуть svg без изменения положения

как повернуть svg без изменения положения

#html #css #css-animations

#HTML #css #css-анимация

Вопрос:

Я пытаюсь создать анимацию вращающейся шины,

если вы проверите код здесь https://jsfiddle.net/8e1soywb / он ведет себя не как шина, я хочу, чтобы шина оставалась в нужном положении, но вращалась, как шина

вот svg шины

   <div id="mainContent"> 

  <xml version="1.0" encoding="utf-8"></xml>
  <svg
    version="1.0"
    id="Capa_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    width="1200px"
    height="1200px"
    viewBox="0 0 1200 1200"
    enable-background="new 0 0 1200 1200"
    xmlSpace="preserve">

    <g id="tire1">
      <ellipse
        transform="matrix(0.9998 -0.0185 0.0185 0.9998 -12.5112 4.8149)"
        fill="#222223"
        cx="253.532"
        cy="677.445"
        rx="85.488"
        ry="84.784" />

      <linearGradient
        id="SVGID_1_"
        gradientUnits="userSpaceOnUse"
        x1="209.297"
        y1="655.672"
        x2="321.8241"
        y2="711.0566">
</linearGradient>
      <path
        fill="url(#SVGID_1_)"
        d="M317.703,676.254c-0.651-35.149-29.91-63.112-65.351-62.454
            c-35.441,0.658-63.643,29.683-62.992,64.832c0.652,35.151,29.911,63.114,65.352,62.457
            C290.152,740.431,318.355,711.403,317.703,676.254z"
      />
    </g>
  </svg>


</div>

Ответ №1:

Вам нужно установить transform-origin его в центр вашей шины. Затем вы можете просто использовать свою rotateTyre анимацию.

 #tire1 {
...
transform-origin: 253.532px 677.445px;     /* 'cx' and 'cy' of SVG ellipse */
animation: rotateTyre 0.8s infinite linear;
}

Комментарии:

1. чувак, я даже не знаю, как тебя отблагодарить, ты абсолютная легенда, иди выпей, ты это заслужил

Ответ №2:

Я попытался воссоздать SVG-файл, похожий на ваш, и применил свои методы! Проверьте это! Вы также можете изменить скорость вращения, изменив длительность анимации.

 #gear{
    animation-name: ckw;
    animation-duration: 0.2s;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block;
}
@keyframes ckw {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}  
   <svg id="gear" height="100" width="100">
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#030200;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#4d4b50;stop-opacity:1" />
    </linearGradient>
  <circle cx="50" cy="50" r="40" fill="url(#grad1)" />  
</svg> 
</div>