Проект TypeScript Vuetify - используйте Two. js Text для визуализации многострочного текста

Question

У меня есть проект Vue / Vuetify, и я хотел бы использовать Two. js Text для создания многострочного текста. Я бы хотел что-то вроде этого

const t1 = new Two.Text("Text must 
 be upright 2\u{1D7B9}", 50, 80, {});
t1.size = 12;
t1.noStroke();
t1.fill = "#000";
(t1 as any).leading = 50;
(t1 as any).id = "mytext";
(t1 as any).className = "myClass";
<twoInstance>.layers[LAYER.foregroundText].add(t1);

, где 
 означает разрыв строки. Я выполняю рендеринг с помощью SVG, и появляется запись HTML

<g id="two-124" transform="matrix(1 0 0 1 487 487)" opacity="1">
<text transform="matrix(1 0 0 1 50 80)" font-family="sans-serif" font-size="12" 
line-height="50" text-anchor="middle" dominant-baseline="middle" 
alignment-baseline="middle" font-style="normal" 
font-weight="500" text-decoration="none" 
fill="#000" stroke="undefined" stroke-width="undefined" 
opacity="1" class="" visibility="visible" id="mytext">
Text must &amp;#13;&amp;#10; be upright 2?</text></g>

Так что это не многострочный текст.

Я обращаюсь к некоторым внутренним переменным Two. js Текст в машинописном тексте (и, возможно, мне не следует этого делать), и поэтому я думаю, что id, className (похоже, не работает) и leading. Я надеялся, что смогу присвоить этому id, а затем использовать CSS для обработки тега / строки <text...> </text> и добавить разрыв строки, но не повезло.

<style lang="scss" scoped>
#mytext {
  font: italic 40px serif;
  fill: red;
  rotate: 90;
  <something here to process the text?>
}
</style>

I надеялся использовать CSS для ввода / обработки области содержимого в текстовом теге, а затем использовать автоматически обернутый текст (ссылки могут быть старыми, но это то, что я думал ). Опять не повезло.

Думаю, SVG мешает. Мне бы хотелось, чтобы текст до и после по центру. Есть мысли по этому поводу? Спасибо!