Home :: Tutorials :: SVG :: Text

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);
}