MaksimLavrenyuk95.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>
Простой
