文本重疊多TSPAN標籤

Question

我有一個自定義jointjs矩形形狀，顯示有2米不同字體大小的文字：

twoTextRect= joint.shapes.basic.Generic.extend({ 
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan><tspan class="word2"></tspan></text></g>', 
defaults: joint.util.deepSupplement({ 
    type: 'twoTextRect', 
    attrs: { 
     rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 160}, 
     text: { ref: 'rect', 'font-size':20}, 
     '.word1': { 'fill':'red'}, 
     '.word2': { 'fill':'blue'} 
    }, 
    size: { width: 160, height: 35 } 
}, joint.shapes.basic.Generic.prototype.defaults)}); 

然後創建我的形狀實例，並設置WORD1和WORD2文字：

var rect3 = new twoTextRect(); 
rect3.attr('.word1/text' , 'aaa'); 
rect3.attr('.word2/text', 'bbbbbb'); 

我根據這個答案創建它：2 different font sizes for text inside basic Rect, jointjs

的問題是，我的文字WORD1中設置和字詞2重疊的，而不是顯示在一個原始的word1和word2都是在開始的時候開始的，而不是一個接一個地出現......我做錯了什麼？

謝謝！

Answer 1

嘗試使用定位低於或類似的選項文本，使它們不重疊

'.word1': { 'fill':'red', ref-x:0.5, ref-y:1}, 
'.word2': { 'fill':'blue', , ref-x:0.5, ref-y:1}