fix: text shape in svg (#886)

packages/tldraw/src/state/shapes/TDShapeUtil.tsx

@@ -184,13 +184,7 @@ export abstract class TDShapeUtil<T extends TDShape, E extends Element = any> ex
       const bounds = this.getBounds(shape)
       const labelElm = getTextSvgElement(s['label'], shape.style, bounds)
       labelElm.setAttribute('fill', getShapeStyle(shape.style, isDarkMode).stroke)
-      const font = getFontStyle(shape.style)
-      const size = getTextLabelSize(s['label'], font)
       labelElm.setAttribute('transform-origin', 'top left')
-      labelElm.setAttribute(
-        'transform',
-        `translate(${bounds.width / 2}, ${(bounds.height - size[1]) / 2})`
-      )
       g.setAttribute('text-align', 'center')
       g.setAttribute('text-anchor', 'middle')
       g.appendChild(elm)

packages/tldraw/src/state/shapes/shared/getTextSvgElement.ts

@@ -2,16 +2,20 @@ import type { TLBounds } from '@tldraw/core'
 import { LINE_HEIGHT } from '~constants'
 import { AlignStyle, ShapeStyles } from '~types'
 import { getTextAlign } from './getTextAlign'
-import { getFontFace, getFontSize } from './shape-styles'
+import { getTextLabelSize } from './getTextSize'
+import { getFontFace, getFontSize, getFontStyle } from './shape-styles'
 
 export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBounds) {
   const fontSize = getFontSize(style.size, style.font)
   const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
   const scale = style.scale ?? 1
 
+  const font = getFontStyle(style)
+  const [, height] = getTextLabelSize(text, font)
   const textLines = text.split('\n').map((line, i) => {
     const textElm = document.createElementNS('http://www.w3.org/2000/svg', 'text')
     textElm.textContent = line
+
     textElm.setAttribute('y', fontSize * (0.5 + i * LINE_HEIGHT) + '')
     textElm.setAttribute('letter-spacing', fontSize * -0.03 + '')
     textElm.setAttribute('font-size', fontSize + 'px')
@@ -19,6 +23,11 @@ export function getTextSvgElement(text: string, style: ShapeStyles, bounds: TLBo
     textElm.setAttribute('text-align', getTextAlign(style.textAlign))
     textElm.setAttribute('text-align', getTextAlign(style.textAlign))
     textElm.setAttribute('alignment-baseline', 'central')
+    const [width] = getTextLabelSize(line, font)
+    textElm.setAttribute(
+      'transform',
+      `translate(${(bounds.width - width) / 2}, ${(bounds.height - height) / 2})`
+    )
     if (style.scale !== 1) {
       textElm.setAttribute('transform', `scale(${style.scale})`)
     }