@MaksimLav

Как убрать разное отображение transform: rotate для svg?

59f7cc3b41468689645986.pngMaksimLavrenyuk95.github.io/FoundationExample/index.html
Есть анимация на сайте, на onklick по зонам повешен поворот стрелки. Анимация отображается нормально только в хроме. В firefox будто бы точка поворота смещается, Edge не отзывается на onklick вообще. Не могу понять как прикрутить кроссбраузерность к этим вещам.

PartClockOne.onclick = function() {
	document.getElementById("ClockNumber").textContent = "15%";
	meterClock.style.transform = 'rotate(-60deg)';

 }
PartClockTwo.onclick = function() {
	document.getElementById("ClockNumber").textContent = "50%";
	meterClock.style.transform = 'rotate(0deg)';
 }
PartClockThree.onclick = function() {
	document.getElementById("ClockNumber").textContent = "75%";
	meterClock.style.transform = 'rotate(60deg)';
 }

<svg class="meter">
                <path id="PartClockOne" class="PartClockOne" fill-rule="evenodd"  fill="rgb(255, 200, 21)"
                   d="M-0.012,127.900 C-0.012,87.412 19.246,51.401 49.164,28.260 L84.006,70.609 C65.348,85.249 55.578,102.557 55.578,127.900 L-0.012,127.900 Z"/>
                <path id="PartClockTwo" class="PartClockTwo" fill-rule="evenodd"  fill="rgb(163, 205, 59)"
                  d="M55.124,23.961 C75.704,9.497 100.862,0.961 128.036,0.961 C155.249,0.961 180.405,9.497 200.941,23.961 L166.423,67.001 C151.739,57.084 140.126,54.797 128.036,54.797 C115.980,54.797 101.848,59.155 89.684,67.001 L55.124,23.961 Z"/>
                <path id="PartClockThree" class="PartClockThree" fill-rule="evenodd"  fill="rgb(0, 147, 215)"
                  d="M205.248,28.260 C234.366,51.401 253.040,87.412 253.040,127.900 L199.053,127.900 C199.053,102.557 188.656,84.503 171.567,70.609 L205.248,28.260 Z"/>
                <polygon id="meterClock" class="meter-clock" points="120,125 130,70 140,125"></polygon>
                <circle class="meter-circle" r="10" cx="130" cy="125"></circle>
</svg>

          </div>
          <div class=" small-12 medium-6 large-6 cell   
          clock-face">
              <div class="clock-face__text">
                Мой уровень владения Java Script
              </div>
              <span id="ClockNumber" class="clock-face__number">12%</span>
          </div>
  • Вопрос задан
  • 368 просмотров
Решения вопроса 1
@ElijahTr
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы