HTML5 : SVG transform-origin 與 rotate

朋友反應「雄 : HTML5 : 圖形計時器」的圓形計時器在 Safari 上，剩餘時間的圓圈位置會跑掉，回想了一下，當初在 iPad 上測試放大縮小的功能時，好像有「骨肉分離」的情形，只是因為當時主要是要給桌機使用，就沒理會這隻臭蟲。

[圖1] Safari SVG transform-origin 失效

會發生位置跑掉的問題，主要是因為這個圓形計時器是使用 SVG 繪圖，為了讓剩餘時間顯示的起點能在上方，並以逆時針方向減少，所以作者使用了 CSS 中的這兩個：

transform: rotate(90deg);
transform-origin: center;

也就是將 SVG 中，顯示剩餘時間的圓圈旋轉90度(第一行)，而且是以中央為旋轉中心(第二行)。這個應用在 Chrome、Edge、Firefox 上，可以正常運作。唯獨 Safari 有問題。

查一下 transform-origin 的說明：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform-origin

transform-origin 在 Safari 是「Partial support」，難怪使用 transform 的 rotate 會出問題。

在 Safari 中，由於 transform-origin: center 無法發揮作用，以致在執行旋轉90度的指令時，它是用預設的「0, 0」當座標的參考點，當放大後，計算的基準跑掉，旋轉後，位置也就跑掉了，變成 [圖1] 錯位的樣子了。

為了解決旋轉中心的問題，只好捨 transform-origin ，改成用設定 SVG transform 屬性的方法來進行旋轉：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

關鍵在這個：

rotate(<a> [<x> <y>])

當我們在 SVG 中的 transform 使用 rotate 時，可以使用三個參數，後面兩個用來指定旋轉中心。所以我將作者原來 CSS 那兩行先拿掉，改在 SVG 畫剩餘時間圓圈的 path 指令中加入了：

transform="rotate(90,45,45)"

「45,45」是 SVG 圖形在不放大時的中心點，這樣子，畫出來的圓圈就不再亂跑了。

以為這樣子就完美了嗎？

Safari 和 Firefox 都沒問題，在 Chrome 上，它卻會先錯位，然後再自動地慢慢移到正確的位置，試了一下，如果把原 CSS 的那兩行再加回去，它才完全不亂跑，真的是整死人了！

沒關係，既然 Chrome 有需要，就再利用 CSS 的語法：

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.base-timer__path-remaining {
transform: rotate(90deg);
transform-origin: center;
}
}

上面限定只有在瀏覽器是 Chrome 時，才會加上 transform 和 transform-origin。

先這樣頭痛醫頭，腳痛醫腳，暫時頂著用，有時間再來看有沒有一體通用的方法。

相關文章

• 雄 : HTML5 : 圖形計時器