Текста перекрытие в jointjs формы с несколькими тегами tspan

Question

У меня есть пользовательский jointjs форму Rect, который отображает текст с 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 и word2 перекрывается вместо того, чтобы отображаться в raw, word1 и word2 начинаются с начала прямоугольника, а не появляются один за другим ... Что я делаю неправильно?

Спасибо!

Answer 1

Попробуйте расположить тексты, используя ниже или аналогичные параметры так, чтобы они не перекрывали друг друга

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