use wrapping svg for dx and dy

airbnb · Apr 18, 2018 · 95186b1 · 95186b1
1 parent b6b0d82
commit 95186b1
Showing 1 changed file with 15 additions and 17 deletions.
diff --git a/packages/vx-text/src/Text.js b/packages/vx-text/src/Text.js
@@ -138,24 +138,22 @@ class Text extends Component {
     }
 
     return (
-      <text
-        {...textProps}
-        textAnchor={textAnchor}
-        style={{
-          transform: `translate(${dx}, ${dy})`,
-          ...textProps.style
-        }}
-      >
-        {
-        wordsByLines.map((line, index) => (
-          <tspan x={x} dy={index === 0 ? startDy : lineHeight} key={index}>
-            {line.words.join(' ')}
-          </tspan>
-        ))
-      }
-      </text>
+      <svg x={dx} y={dy} fontSize={textProps.fontSize} style={{ overflow: 'visible' }}>
+        <text
+          {...textProps}
+          textAnchor={textAnchor}
+        >
+          {
+          wordsByLines.map((line, index) => (
+            <tspan x={x} dy={index === 0 ? startDy : lineHeight} key={index}>
+              {line.words.join(' ')}
+            </tspan>
+          ))
+        }
+        </text>
+      </svg>
     );
   }
 }
 
-export default Text;
+export default Text;