Simple SVGRectText as foreignObject

ui/src/components/rects/SVGRectText.vue

@@ -1,13 +1,18 @@
 <template>
-  <text
-    :x="Math.round(parent_aspect_ratio * rectangle.middle.x)"
-    :y="Math.round(rectangle.middle.y)"
+  <foreignObject
+    :x="Math.round(parent_aspect_ratio * rectangle.left)"
+    :y="rectangle.top"
+    :width="Math.round(parent_aspect_ratio * rectangle.width)"
+    :height="rectangle.height"
     :style="`transform: scaleX(${1 / parent_aspect_ratio})`"
-    text-anchor="middle"
-    dominant-baseline="middle"
   >
-    {{ text }}
-  </text>
+    <div
+      xmlns="http://www.w3.org/1999/xhtml"
+      class="is-flex is-align-items-center is-justify-content-center"
+    >
+      <div class="is-size-1 has-text-weight-bold">{{ text }}</div>
+    </div>
+  </foreignObject>
 </template>
 
 <script lang="ts">
@@ -54,10 +59,8 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-text {
-  fill: red;
-
-  font-weight: bold;
-  font-size: 50px;
+foreignObject > div {
+  color: red;
+  height: inherit;
 }
 </style>