Fix rotation on safari

static/logo-white.svg

@@ -19,25 +19,24 @@
   </defs>
 
   <mask fill="white" id="mask">
-    <g transform-origin="50% 50%">
-      <circle cx="50" cy="50" r="14" />
-      <use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
-      <use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
-      <use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
-      <use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
-      <animateTransform 
-        attributeName="transform" 
-        type="rotate"
-        values="0;90" 
-        dur="10s" 
-        repeatCount="indefinite" 
-      />
-    </g>
+    <circle cx="50" cy="50" r="14" />
+    <use href="#ray-a" transform="translate(50 50) rotate(0 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(90 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(180 0 0)" />
+    <use href="#ray-a" transform="translate(50 50) rotate(270 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(45 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(135 0 0)" />
+    <use href="#ray-b" transform="translate(50 50) rotate(225 0 0) " />
+    <use href="#ray-b" transform="translate(50 50) rotate(315 0 0)" />
   </mask>
 
-  <rect width="100%" height="100%" fill="white" mask="url(#mask)"/>
+  <rect width="100" height="100" fill="white" mask="url(#mask)"> 
+    <animateTransform 
+      attributeName="transform" 
+      type="rotate"
+      values="0 50 50;90 50 50" 
+      dur="10s" 
+      repeatCount="indefinite" 
+    />
+  </rect>
 </svg>