テキスト重複

Question

私は2つの異なるフォントサイズでテキストを表示するカスタムjointjsのRectの形状を有している：

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)}); 

それから私は私の形状のインスタンスを作成し、単語1と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に設定されたテキストが重なっての代わりに表示されているということです生の、word1とword2の両方が、次々に出現するのではなく、rectの最初から始まります...何が間違っていますか？

ありがとうございます！

Answer 1

彼らは

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