Повернуть SVG-элемент, как изображение

05 сентября 2021, 14:00

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

document.querySelector('button').addEventListener('click', () => { 
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor'); 
})

#pomidor { 
  transform-origin: 50% 50%; 
  opacity: 1; 
  transition: all 4s; 
} 
 
#pomidor.pomidor { 
  opacity: 1; 
  transform: rotate(-360deg); 
}

<div class="kolo"> 
  <svg width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <g id="pomidor"> 
            <g id="left"> 
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24"> 
              </path>          
            </g> 
            <g id="right"> 
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green"> 
              </path>            
            </g> 
          </g> 
    </svg> 
</div> 
<button> Rotate circle</button>

Answer 1

Установите для CSS-свойства transform-box значение fill-box, чтобы фигура вращалась вокруг своего собственного центра, а не вокруг левого верхнего угла viewBox.

document.querySelector('button').addEventListener('click', () => { 
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor'); 
})

#pomidor { 
  transform-origin: 50% 50%; 
  transform-box: fill-box; 
  opacity: 1; 
  transition: all 4s; 
} 
 
#pomidor.pomidor { 
  opacity: 1; 
  transform: rotate(-360deg); 
}

<div class="kolo"> 
  <svg width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <g id="pomidor"> 
            <g id="left"> 
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24"> 
              </path>          
            </g> 
            <g id="right"> 
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green"> 
              </path>            
            </g> 
          </g> 
    </svg> 
</div> 
<button> Rotate circle</button>

Источник ответа: @RobertLongson

Answer 2

Вам нужно настроить transform-origin, чтобы установить точку трансформации в середине этого круга (я использовал плагин линейки в своем браузере, чтобы легко найти его, никакой магии):

document.querySelector('button').addEventListener('click', () => { 
  document.querySelector('.kolo svg #pomidor').classList.add('pomidor'); 
})

#pomidor { 
  transform-origin:  204px 41px; 
  opacity: 1; 
  transition: all 4s; 
} 
 
#pomidor.pomidor { 
  opacity: 1; 
  transform: rotate(-360deg); 
}

<div class="kolo"> 
  <svg width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <g id="pomidor"> 
            <g id="left"> 
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24"> 
              </path>          
            </g> 
            <g id="right"> 
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green"> 
              </path>            
            </g> 
          </g> 
    </svg> 
</div> 
<button> Rotate circle</button>

Пример вращения колеса с одновременным перемещением

document.querySelector("button").addEventListener("click", () => { 
  document.querySelector(".kolo svg #pomidor").classList.add("pomidor"); 
  document.querySelector(".kolo #test").classList.add("pomidor"); 
});

#pomidor { 
  transform-origin: 204px 41px; 
  opacity: 1; 
  transition: all 4s; 
} 
#test { 
  transition: 4s; 
} 
#test.pomidor { 
  transform: translatex(-65%); 
} 
#pomidor.pomidor { 
  opacity: 1; 
  transform: rotate(-360deg); 
}

<div class="kolo"> 
  <svg id="test" width="246px" height="133px" viewBox="0 0 246 133" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
          <g id="pomidor">                
            <g id="left"> 
              <path d="M188.669237,2.85577743 L220.007541,78.7916793 C215.011273,80.9577555 209.503344,82.159 203.7202,82.159 C181.0712,82.159 162.6422,63.731 162.6422,41.08 C162.6422,23.7394433 173.442929,8.87328458 188.669237,2.85577743 Z" id="tomato-dark" fill="#ED2D24"> 
              </path>  
            </g> 
            <g id="right"> 
              <path d="M203.7202,0.0003 C198.1552,0.0003 192.8472,1.1183 188.0022,3.1323 L219.4392,79.0273 C234.3122,72.8423 244.8002,58.1653 244.8002,41.0803 C244.8002,18.4283 226.3712,0.0003 203.7202,0.0003" id="tomato-light" fill="green"> 
              </path>            
            </g> 
          </g> 
    </svg> 
</div> 
<button> Rotate circle</button>

Источник ответа: @G-Cyr