From f79214dfbb36b44e2a56a5fb455cd7d9358eb39c Mon Sep 17 00:00:00 2001
From: Atul Varma <varmaa@gmail.com>
Date: Wed, 17 Feb 2021 12:37:24 -0500
Subject: [PATCH] Work around unsupported transform-origin on Safari.

---
 lib/pages/creature-page.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/lib/pages/creature-page.tsx b/lib/pages/creature-page.tsx
index 88b5478..1dcfc70 100644
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@@ -171,11 +171,24 @@ type AttachmentTransformProps = {
 
 const AttachmentTransform: React.FC<AttachmentTransformProps> = (props) => (
   <g transform={`translate(${props.translate.x} ${props.translate.y})`}>
+    {/**
+     * We originally used "transform-origin" here but that's not currently
+     * supported by Safari. Instead, we'll set the origin of our symbol to
+     * the transform origin, do the transform, and then move our origin back to
+     * the original origin, which is equivalent to setting "transform-origin".
+     **/}
     <g
-      transform-origin={`${props.transformOrigin.x} ${props.transformOrigin.y}`}
-      transform={`scale(${props.scale.x} ${props.scale.y}) rotate(${props.rotate})`}
+      transform={`translate(${props.transformOrigin.x} ${props.transformOrigin.y})`}
     >
-      {props.children}
+      <g
+        transform={`scale(${props.scale.x} ${props.scale.y}) rotate(${props.rotate})`}
+      >
+        <g
+          transform={`translate(-${props.transformOrigin.x} -${props.transformOrigin.y})`}
+        >
+          {props.children}
+        </g>
+      </g>
     </g>
   </g>
 );