SVG Text Element

We can easily add text element in the SVG with help of text element and by default browser put the text coordinate of x, y to zero, the text will appear on the top left of the browser and we may not be able to see the text.

<svg height="30" width="200">
  <text x="0" y="15" fill="red">SVG Text Here</text>
  Sorry, your browser does not support inline SVG.
</svg>

What we are learning here

1. SVG text element attribute.
2. Positioning our text element in SVG
3. Use of tspan in text

var dataArray = [5,11,18];

var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");
var newX = 400;

				
svg.append("text")
	.attr("x", newX)
	.attr("y", 150)
	.attr("fill","none")
	.attr("stroke","blue")
	.attr("stroke-width","2")
	.attr("text-anchor","start")
	.attr("dominant-baseline","middle")
	.attr("font-size","30")
	.text("start text anchor here");

svg.append("text")
	.attr("x", newX)
	.attr("y", 180)
	.attr("fill","blue")
	.attr("stroke","none")
	.attr("text-anchor","middle")
	.attr("dominant-baseline","middle")
	.attr("font-size","30")
	.text("text anchor midddle here");

svg.append("text")
	.attr("x", newX)
	.attr("y", 210)
	.attr("stroke","blue")
	.attr("fill","none")
	.attr("text-anchor","end")
	.attr("dominant-baseline","middle")
	.attr("font-size","30")
	.text("Text Anchor end here");
	
svg.append("line")
	.attr("x1",newX)
	.attr("y1","150")
	.attr("x2",newX)
	.attr("y2","210"); 
 

We can add the text in SVG assvg.append(“text”).text(“Hello World”).  In above code all word begins at the newx that is 400px, we will change the alignment of each word and we want to line up text item in the exact center of another element say a rectangle.  In D3 we can’t do adding text to another svg shape and can’t apply alignment to the middle, start, and end.  In other words, we can’t  add text to a rectangle, circle or any other SVG element. What we can do is add one element one top of another and position them in a similar way.

Screen shot of our above code

As text is aligned default by the browser at the bottom left of text element or item.  In above picture, we can see black line start at the bottom of word start and similar end at the bottom of a word end. By default, our text is aligned vertically by the browser at the bottom of the text. We can change the vertical alignment with two attributes in D3.  But alignmentBaseLine is not working properly in the Firefox and we can use dominantBaseLine to change the vertical alignment in D3.  We can see the second picture where the line had stay in the same position it was before but the text had shifted down.

Text alignment in the SVG

We can align our text position in SVG with help of two Attribute.

Text-anchor – To align text horizontal as star, middle, and end.
Dominant-box – To align text in vertical.https://googleads.g.doubleclick.net/pagead/ads?guci=2.2.0.0.2.2.0.0&client=ca-pub-1356398211527823&output=html&h=280&adk=3673214374&adf=3707523846&pi=t.aa~a.1529058995~i.27~rp.4&w=820&fwrn=4&fwrnh=100&lmt=1604491902&num_ads=1&rafmt=1&armr=3&sem=mc&pwprc=3605573203&psa=1&ad_type=text_image&format=820×280&url=https%3A%2F%2Fedupala.com%2Fsvg-text-element%2F%3Fpreview_id%3D198%26preview_nonce%3D5907a36d57%26preview%3Dtrue%26_thumbnail_id%3D210&flash=0&fwr=0&pra=3&rh=200&rw=820&rpe=1&resp_fmts=3&wgl=1&fa=27&adsid=ChAIgL-J_QUQ1fflpvXQjOZwEkwAOCs2XyO0a9VXxvaRiUjRauIfkZeZOKg_LPvo_cPvbZ6CsMgoMUeBivCH3yr_6PlQ9ajp5PoF7VW-SuLNHRr9VX8LmouHWKIl1KOB&tt_state=W3siaXNzdWVyT3JpZ2luIjoiaHR0cHM6Ly9hZHNlcnZpY2UuZ29vZ2xlLmNvbSIsInN0YXRlIjowfSx7Imlzc3Vlck9yaWdpbiI6Imh0dHBzOi8vYXR0ZXN0YXRpb24uYW5kcm9pZC5jb20iLCJzdGF0ZSI6MH1d&dt=1604491902339&bpp=5&bdt=4824&idt=5&shv=r20201029&cbv=r20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3D618eb4a6965617d5-225a0c2a76c30085%3AT%3D1599967789%3ART%3D1599967789%3AS%3DALNI_MaE9Z5kizFr7sh8gCp8oqwj9iVr5g&prev_fmts=187×600%2C0x0&nras=2&correlator=55533395393&frm=20&pv=1&ga_vid=1910321517.1601224101&ga_sid=1604491901&ga_hid=885290596&ga_fc=0&iag=0&icsg=2281135&dssz=20&mdo=0&mso=0&u_tz=330&u_his=1&u_java=0&u_h=768&u_w=1366&u_ah=741&u_aw=1294&u_cd=24&u_nplug=3&u_nmime=4&adx=247&ady=2627&biw=1279&bih=622&scr_x=0&scr_y=1538&eid=21066434%2C44730556%2C21066973&oid=3&pvsid=3465135717596251&pem=151&ref=https%3A%2F%2Fedupala.com%2Fwp-admin%2Fpost.php%3Fpost%3D198%26action%3Dedit&rx=0&eae=0&fc=384&brdim=72%2C27%2C72%2C27%2C1294%2C27%2C1294%2C741%2C1294%2C637&vis=1&rsz=%7C%7Cs%7C&abl=NS&fu=9344&bc=31&jar=2020-11-04-10&ifi=2&uci=a!2&btvi=1&fsb=1&xpc=xvlYQgYARL&p=https%3A//edupala.com&dtd=62

In the second example below we can see that we can align the text on top of any other SVG element, by positioning the same location of text coordinate with another element. We can easily change the horizontal alignment of text by using text attribute called anchor-text to the middle as shown below.

Adding new line in SVG Text

In our first example, we had added 3 texts manually. In the HTML we write a paragraph and we can put a break or new line character into the paragraph. We can’t add a new line to text in D3, we can only achieve this with help of tspan in D3.

var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");
var newX = 400;
var textArray = ['start','middle','end'];
				
svg.append("text").selectAll("tspan")
	.data(textArray)
	.enter().append("tspan")
	.attr("x", newX)
	.attr("y", function(d,i){return 150 + (i*30); })
	.attr("fill","none")
	.attr("stroke","blue")
	.attr("stroke-width","2")
	.attr("text-anchor","start")
	.attr("dominant-baseline","middle")
	.attr("font-size","30")
	.text(function(d){ return d; }); 
 
 

In above code, we are creating a text element with three tspan an element inside the text element inSVG. At the last a highlight line code, we are dynamically creating text with help of text array data.