CODEWITHSUNDEEP
svgtext
Scott C Wilson
Scott C Wilson

Reputation: 20016

Centering <text> element within <svg>

I have a piece of text I'm showing: 

    <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>

and I know that to get the line to be centered horizontally, I have to increase the "x" parameter of the text element. But how do I compute what the value should be?

Upvotes: 1

Views: 34

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Just use text-anchor="middle" and x="50%" to centre the text.

    <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>

Upvotes: 1

Related Questions