在文字

Question

我想在文字中放置一个文字。我有：font，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？

Answer 1

呃......你在找这样的东西吗？

* {font-family: 'Consolas', 'Courier New', monospace; line-height: 1;}
.classDgm {border: 1px solid #666; text-align: center; width: 175px;}
.classDgm .head {border-bottom: 1px solid #666; padding: 5px;}
.classDgm .body {min-height: 100px; padding: 5px;}

<div class="classDgm">
  <div class="head">processTest</div>
  <div class="body">lane0</div>
</div>

预览

您可以使用line-height，min-height。我给了min-height，以防所有其他类似的图表与它对齐。

Answer 2

没有代码，很难分辨。

如果它在表格中尝试使用CSS：

text-align: center;
vertical-align: middle;

否则padding-top: 10px;应该适用于定位。

当CSS可以完成所有操作时，不需要JavaScript。