svg animatetransform 在 Firefox 上工作，但不在 chrome/ie 上工作

Question

我正在使用間隔方法來轉換時鍾的指針。 時鍾在 Firefox 中按預期工作，但在 Chrome 和 IE 中沒有。

此外，控制台上沒有錯誤。 但變換屬性似乎正在及時更新，但用戶界面沒有得到更新。

 var clock = document.querySelector('#clock'); var hands = []; var cx = 110; var cy = 110; function init() { hands.push(clock.querySelector('#second > *')); hands.push(clock.querySelector('#minute > *')); hands.push(clock.querySelector('#hour > *')); setInterval(function () { transformHands(); }, 1000); }; function transformHands() { var now = new Date(); var hours = 360 * now.getHours() / 12 + now.getMinutes() / 2; var minutes = 360 * now.getMinutes() / 60; var seconds = 360 * now.getSeconds() / 60; hands[0].setAttribute('from', shifter(seconds)); hands[0].setAttribute('to', shifter(seconds + 360)); hands[1].setAttribute('from', shifter(minutes)); hands[1].setAttribute('to', shifter(minutes + 360)); hands[2].setAttribute('from', shifter(hours)); hands[2].setAttribute('to', shifter(hours + 360)); } function shifter(value){ return [value, cx, cy].join(' '); } init();

 body { background-color: #eee; } div.container { border: 5px solid #333; display: block; width:220px; height:220px; } svg { display: block; position: relative; width:100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #border { stroke: #333; stroke-width: 5px; fill: #eee; } #digits > line { stroke: #333; } #digits > text { fill: #333; font-size: 12px; font-weight: bold; text-anchor: middle; dominant-baseline: central; } #hour { stroke: #333; stroke-width: 5px; } #minute { stroke: #333; stroke-width: 3px; } #second { stroke: dodgerblue; stroke-width: 2px; } #cap { stroke: dodgerblue; stroke-width: 2px; fill: #eee; }

 <div class='container'> <svg id='clock' width='220' height='220'> <g id='face'> <circle id='border' cx='110' cy='110' r='95'></circle> </g> <g id='digits'> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(30 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(60 110 110)'></line> <text x='192.5' y='110'>III</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(120 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(150 110 110)'></line> <text x='110' y='192.5'>VI</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(210 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(240 110 110)'></line> <text x='27.5' y='110'>IX</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(300 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(330 110 110)'></line> <text x='110' y='27.5'>XII</text> </g> <g id='hands'> <line id='hour' x1='110' y1='110' x2='110' y2='55'> <animateTransform attributeName='transform' attributeType='XML' type='rotate'></animateTransform> </line> <line id='minute' x1='110' y1='110' x2='110' y2='44'> <animateTransform attributeName='transform' attributeType='XML' type='rotate'></animateTransform> </line> <line id='second' x1='110' y1='110' x2='110' y2='33'> <animateTransform attributeName='transform' attributeType='XML' type='rotate'></animateTransform> </line> <circle id='cap' cx='110' cy='110' r='3'></circle> </g> </svg> </div>

我不知道我錯過了什么。 任何幫助將不勝感激。

請在此處查看演示https://codepen.io/rkpaswan_in/pen/aqPPVQ

Answer 1

IE/Edge 不支持 SMIL 動畫。 如果你想讓它在 IE 中工作，你需要使用FakeSmile polyfill 。

至於Chrome，我想如果您修改屬性，它不會更新動畫。 你應該向 Chrome 報告。

不過有一個簡單的修復方法。 將begin屬性設置為"indefinite"

<animateTransform ... begin="indefinite"></animateTransform>

然后在設置屬性后開始運行動畫。

hands[0].beginElement();

 var clock = document.querySelector('#clock'); var hands = []; var cx = 110; var cy = 110; function init() { hands.push(clock.querySelector('#second > *')); hands.push(clock.querySelector('#minute > *')); hands.push(clock.querySelector('#hour > *')); setInterval(function () { transformHands(); }, 1000); }; function transformHands() { var now = new Date(); var hours = 360 * now.getHours() / 12 + now.getMinutes() / 2; var minutes = 360 * now.getMinutes() / 60; var seconds = 360 * now.getSeconds() / 60; hands[0].setAttribute('from', shifter(seconds)); hands[0].setAttribute('to', shifter(seconds + 360)); hands[0].beginElement(); hands[1].setAttribute('from', shifter(minutes)); hands[1].setAttribute('to', shifter(minutes + 360)); hands[1].beginElement(); hands[2].setAttribute('from', shifter(hours)); hands[2].setAttribute('to', shifter(hours + 360)); hands[2].beginElement(); } function shifter(value){ return [value, cx, cy].join(' '); } init();

 body { background-color: #eee; } div.container { border: 5px solid #333; display: block; width:220px; height:220px; } svg { display: block; position: relative; width:100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #border { stroke: #333; stroke-width: 5px; fill: #eee; } #digits > line { stroke: #333; } #digits > text { fill: #333; font-size: 12px; font-weight: bold; text-anchor: middle; dominant-baseline: central; } #hour { stroke: #333; stroke-width: 5px; } #minute { stroke: #333; stroke-width: 3px; } #second { stroke: dodgerblue; stroke-width: 2px; } #cap { stroke: dodgerblue; stroke-width: 2px; fill: #eee; }

 <div class='container'> <svg id='clock' width='220' height='220'> <g id='face'> <circle id='border' cx='110' cy='110' r='95'></circle> </g> <g id='digits'> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(30 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(60 110 110)'></line> <text x='192.5' y='110'>III</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(120 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(150 110 110)'></line> <text x='110' y='192.5'>VI</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(210 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(240 110 110)'></line> <text x='27.5' y='110'>IX</text> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(300 110 110)'></line> <line x1='110' y1='22' x2='110' y2='33' transform='rotate(330 110 110)'></line> <text x='110' y='27.5'>XII</text> </g> <g id='hands'> <line id='hour' x1='110' y1='110' x2='110' y2='55'> <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform> </line> <line id='minute' x1='110' y1='110' x2='110' y2='44'> <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform> </line> <line id='second' x1='110' y1='110' x2='110' y2='33'> <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform> </line> <circle id='cap' cx='110' cy='110' r='3'></circle> </g> </svg> </div>