CODEWITHSUNDEEP
javascripthtmlcsssvg
Roman Sulyma
Roman Sulyma

Reputation: 23

Rotate SVG element like image rotate

I trying to do that the circle stood still and spun around itself, but it rotates through the page. I just start to learn SVG and stuck at this moment. I'll be thankful for any help.

https://jsfiddle.net/5rz82ct3/1/

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>

Upvotes: 2

Views: 293

Answers (2)

Robert Longson
Robert Longson

Reputation: 123985

Set the transform-box CSS property to fill-box so that the shape rotates around its own centre rather than the 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>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105843

you need to calibrate transform-origin to set the transform point in the middle of that circle (i used a ruler plugin in my browser to easily find it, no magic):

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>

Upvotes: 2

Related Questions