Я вижу, что вы хотите поддерживать старые версии IE браузера. как IE 7, IE 8, et c.
Я хочу сообщить вам, что SVG поддерживается IE версия 9.
С IE 9 до IE 11 все версии браузера IE имеют частичную поддержку SVG.
Так что сложно создать анимированный таймер для этих старых версий браузера IE.
Я предлагаю вам попробовать отобразить простой таймер для неподдерживаемых версий браузера IE и вы можете отобразить таймер анимированного круга для поддерживаемых версий браузера IE (например, Ie 11).
Вот простой пример:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML Timer example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-align: center;
font-size: 20px;
margin-top: 0px;
}
#demo {
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
vertical-align: middle;
line-height: 100px;
border:solid black;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.innerHTML = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
window.onload = function () {
var fiveMinutes = 60 * 5,
display = document.getElementById('demo');
startTimer(fiveMinutes, display);
};
</script>
</body>
</html>
Ниже приведена еще одна полезная ссылка, но это решение также может вызвать проблемы со старой версией браузера IE. Так что лучше использовать простой таймер.
CSS P ie Таймер