我想將文本放置在形狀中。我有:字體,textWidth,textHeight,文本邊距。文本放入有其座標x和y的形狀: 等什麼我得到的是:在形狀中放置文本
這是SVG,我產生:
<g class='nodeGroup' transform='translate(43,-66)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'>
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='618' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
<text fill='black' x='98' y='8' width='64' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold' horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='60' verticalAlignment='top'>
processtest</text>
<line stroke='lightgray' fill='none' x='0' y='30' x1='0' y1='30' x2='260' y2='30' width='260' height='0' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
</g>
<g class='nodeGroup' transform='translate(43,-36)' style='-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;'>
<rect stroke='lightgray' fill='#FEFEF5' x='0' y='0' width='260' height='588' padding='0,0,0,0' marginBottom='0' marginLeft='0' marginRight='0' marginTop='0'/>
<text fill='black' x='113' y='8' width='34' height='14' padding='0,0,0,0' cursor='default' angle='0' font='14px Calibri Bold' horizontalAlignment='center' marginBottom='8' marginLeft='0' marginRight='0' marginTop='8' textHeight='14' textWidth='30' verticalAlignment='top'>lane0</text>
</g>
而且我試圖把文本放在正確的位置與矩形形狀座標比較,我想要得到的:
,這是我想要得到的SVG:
<g class="nodeGroup" transform="translate(43,-66)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
<rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="618" />
<text fill="black" cursor="default" x="100" y="19" style="font:14px Calibri Bold;">processtest</text>
<line stroke="#2e3d54" stroke-width="1" fill="none" x1="0" y1="30" x2="260" y2="30" />
</g>
<g class="nodeGroup" transform="translate(43,-36)" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
<rect stroke="#2e3d54" stroke-width="2" fill="#FEFEF5" x="0" y="0" width="260" height="588" />
<text fill="black" cursor="default" x="115" y="19" style="font:14px Calibri Bold;">lane0</text>
</g>
使用JavaScript,我怎麼能放置文本,並計算其x和y?
你可以請添加一些代碼示例? –
我們需要代碼示例。另外,爲什麼要使用JavaScript?造型通常使用CSS完成。我認爲你正在尋找['線height'(https://developer.mozilla.org/en/docs/Web/CSS/line-height)第一直覺IST,就像是這種情況[在這個問題上](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css)。另外,你爲什麼要關注盒子的座標?如果文本在方框內(小孩),相對定位應該是可能的,並且在大多數情況下是優選的。 – domsson
請提供代碼或製作小提琴。 –