在<svg>

Question

我有一段文字显示：

    <div id="fixed-target" style="display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width="654" height="83"> 
           <rect id="rect1" x="20" y="59" width="100%" height="83px" fill="transparent" stroke="transparent"></rect>       
                <text text-anchor="start" x="150" y="59" font-family="Abbey" font-size="60px" 
 style="font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan text-anchor="start" dy="15">Some test text</tspan>
         </text>                          
      </svg>      
    </div>

我知道要让线条水平居中，我必须增加＆＃34; x＆＃34;文本元素的参数。但是我如何计算该值应该是多少？

Answer 1

只需使用text-anchor =“middle”和x =“50％”将文本居中。

    <div id="fixed-target" style="display:block; margin:0 auto; width:100%; height:103px; border:0px solid #000; overflow-x:auto; ">
      <svg width="654" height="83"> 
                <text text-anchor="middle" x="50%" y="59" font-family="Abbey" font-size="60px" 
 style="font:bold 80px Arial; color:#fff; fill:rgb(0,0,0);">
           <tspan dy="15">Some test text</tspan>
         </text>                          
      </svg>      
    </div>