fix(servo): broken on safari

apparently, SVG `transform-origin` attribute doesn't work on safari, so instead we change the origin of the rotation using a pair of `translate` transforms. close #39
wokwi · Jul 31, 2020 · 0820097 · 0820097
1 parent de969e0
commit 0820097
Showing 1 changed file with 1 addition and 2 deletions.
diff --git a/src/servo-element.ts b/src/servo-element.ts
@@ -73,8 +73,7 @@ export class ServoElement extends LitElement {
         <circle fill="#999" cx="91.467" cy="59.773" r="18.606" />
         <path
           fill=${this.hornColor}
-          transform="rotate(${this.angle})"
-          transform-origin="91.467 59.773"
+          transform="translate(91.467 59.773) rotate(${this.angle ?? 0}) translate(-91.467 -59.773)"
           d="${this.hornPath()}"
         />
         <circle fill="gray" cx="91.467" cy="59.773" r="8.3729" />