Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Align lines of text to center in SVG

I need to output multiple lines of text in SVG. For that I'm using the following scheme:

<text>   <tspan> First line </tspan>   <tspan> Second line </tspan> </text> 

First and second line of the text can have different number of characters, which can change dynamically. I want the second line to appear under the first line and text in both of them to be centered.

I can make second line appear below the first line by adding dy="15" for the second <tspan>.

I can align the text in each individual <tspan> by adding text-anchor="middle" to it.

But how to do relative centric alignment of those <tspan>'s?

I tried to use x="0" for each <tspan> but apparently it doesn't work since each <tspan> has different width and the rendered text in the shorter line is shifted to the left.

Is there a way to align centres of 2 <tspan>'s of different width using only CSS and/or SVG.

like image 242
BartoNaz Avatar asked Apr 24 '14 14:04

BartoNaz


People also ask

How do I center align text in SVG?

Set the position of the text to the absolute center of the element in which you want to center it: If it's the parent, you could just do x="50%" y ="50%" . If it's another element, x would be the x of that element + half its width (and similar for y but with the height).

How do I center an element in SVG?

Just add: . container { display: flex; justify-content: center; } And add the . container class to the div which contains your svg.


2 Answers

If you add text-anchor="middle" to each tspan you will center them (you have to remove the space between the tspans as well, otherwise the extra space will be considered as part of the first line and they won't be completely centered).

For example:

<svg>     <text y="50" transform="translate(100)">        <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>    </text> </svg> 

See: JSFiddle

like image 61
helderdarocha Avatar answered Oct 09 '22 02:10

helderdarocha


DEMO

enter image description here

text-anchor='start' for right align.

text-anchor='middle' for middle align.

text-anchor='end' for left align.

Code from demo:

<svg width="100%" height="230" viewBox="0 0 120 230"      xmlns="http://www.w3.org/2000/svg" version="1.1">      <!-- Materialisation of anchors -->     <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />       <!-- Anchors in action -->     <text text-anchor="start"           x="60" y="40">This text will align right</text>      <text text-anchor="middle"           x="60" y="75">This text will align middle</text>      <text text-anchor="end"           x="60" y="110">This text will align left</text>      <!-- Materialisation of anchors -->     <circle cx="60" cy="40" r="3" fill="red" />     <circle cx="60" cy="75" r="3" fill="red" />     <circle cx="60" cy="110" r="3" fill="red" />  <style><![CDATA[ text{     font: bold 15px Verdana, Helvetica, Arial, sans-serif; } ]]></style> </svg> 

Read more about text-anchor property here

like image 30
Imran Bughio Avatar answered Oct 09 '22 01:10

Imran Bughio