From 61442cb3597b33f7c3b1cfadf4874c945402828c Mon Sep 17 00:00:00 2001
From: Edison Lee <edisonlee@edisonlee55.com>
Date: Sat, 18 Jul 2020 10:37:34 +0800
Subject: [PATCH] fix: fixed CSS scale() issue on WebKit by wrap up text in g
 tag

---
 src/renderStatsCard.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/renderStatsCard.js b/src/renderStatsCard.js
index 14d063c..94c817d 100644
--- a/src/renderStatsCard.js
+++ b/src/renderStatsCard.js
@@ -135,16 +135,17 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
       })">
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
-        <text
-          x="${rank.level.length === 1 ? "-4" : "0"}"
-          y="0"
-          alignment-baseline="central"
-          dominant-baseline="central"
-          text-anchor="middle"
-          class="rank-text"
-        >
-          ${rank.level}
-        </text>
+        <g class="rank-text">
+          <text
+            x="${rank.level.length === 1 ? "-4" : "0"}"
+            y="0"
+            alignment-baseline="central"
+            dominant-baseline="central"
+            text-anchor="middle"
+          >
+            ${rank.level}
+          </text>
+        </g>
       </g>`;
 
   // the better user's score the the rank will be closer to zero so