Left Justification
var svgns = "http://www.w3.org/2000/svg";
function makeShape(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
var data = svgDocument.createTextNode("Text");
var text = svgDocument.createElementNS(svgns, "text");
text.setAttributeNS(null, "x", "0");
text.setAttributeNS(null, "y", "13");
text.setAttributeNS(null, "fill", "green");
text.setAttributeNS(null, "text-anchor", "start");
text.appendChild(data);
svgDocument.documentElement.appendChild(text);
}
Center
var svgns = "http://www.w3.org/2000/svg";
function makeShape(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
var data = svgDocument.createTextNode("Text");
var text = svgDocument.createElementNS(svgns, "text");
text.setAttributeNS(null, "x", "25");
text.setAttributeNS(null, "y", "13");
text.setAttributeNS(null, "fill", "green");
text.setAttributeNS(null, "text-anchor", "middle");
text.appendChild(data);
svgDocument.documentElement.appendChild(text);
}
Right Justification
var svgns = "http://www.w3.org/2000/svg";
function makeShape(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
var data = svgDocument.createTextNode("Text");
var text = svgDocument.createElementNS(svgns, "text");
text.setAttributeNS(null, "x", "50");
text.setAttributeNS(null, "y", "13");
text.setAttributeNS(null, "fill", "green");
text.setAttributeNS(null, "text-anchor", "end");
text.appendChild(data);
svgDocument.documentElement.appendChild(text);
}
Multiple Lines
var svgns = "http://www.w3.org/2000/svg";
function makeShape(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
var data1 = svgDocument.createTextNode("Line 1");
var data2 = svgDocument.createTextNode("Line 2");
var span1 = svgDocument.createElementNS(svgns, "tspan");
var span2 = svgDocument.createElementNS(svgns, "tspan");
span2.setAttributeNS(null, "x", "0");
span2.setAttributeNS(null, "dy", "1em");
var text = svgDocument.createElementNS(svgns, "text");
text.setAttributeNS(null, "x", "0");
text.setAttributeNS(null, "y", "13");
text.setAttributeNS(null, "fill", "green");
span1.appendChild(data1);
span2.appendChild(data2);
text.appendChild(span1);
text.appendChild(span2);
svgDocument.documentElement.appendChild(text);
}
Text on a Path
var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
function makeShape(e) {
if ( window.svgDocument == null )
svgDocument = e.target.ownerDocument;
var defs = svgDocument.createElementNS(svgns, "defs");
var path = svgDocument.createElementNS(svgns, "path");
path.setAttributeNS(null, "id", "textPath");
path.setAttributeNS(null, "d", "M10 50 C10 0 90 0 90 50");
defs.appendChild(path);
svgDocument.documentElement.appendChild(defs);
var text = svgDocument.createElementNS(svgns, "text");
text.setAttributeNS(null, "fill", "green");
var textPath = svgDocument.createElementNS(svgns, "textPath");
textPath.setAttributeNS(xlinkns, "xlink:href", "#textPath");
var data = svgDocument.createTextNode("Text on a Path");
textPath.appendChild(data);
text.appendChild(textPath);
svgDocument.documentElement.appendChild(text);
}