CDrnly
CDrnly

Reputation: 461

JQuery SVG Drawing Text

I am creating a HTML 5 site that performs some form of diagramming in SVG using the JQuery SVG library by Keith Wood.

I would like to be able to draw simple text on the SVG canvas - nothing fancy just standard text (i.e. like a word or title text) which is given as examples on this site as actual SVG.

http://www.kevlindev.com/tutorials/basics/text/svg/index.htm

I have looked at the API reference on the Jquery library site and all I get is a complicated example of drawing wavy text which I am not interested in.

Can anyone give me a simple example of how I write text using the library API?

Upvotes: 3

Views: 3820

Answers (2)

bob quinn
bob quinn

Reputation: 541

Here are a couple simple jQuery SVG Text examples:

    // Simple jQuery SVG Text examples
    var g = svg.group(
        {fontWeight: 'bold', fontSize: '32.5', fill: 'salmon'}
    ); 
    svg.text(g, 10, 40, "Here's an example of SVG Text");         
    svg.text(g, 10, 80, "in an SVG 'group' wrapper"); 

    svg.text( 10, 130, "and without a wrapper (as an svg root)", 
        {fontWeight: 'bold', fontSize: '32.5', fill: 'gold'}
    ); 

Upvotes: 3

Chasbeen
Chasbeen

Reputation: 1436

I covered this on my site recently and the wavy text example includes the textpath and the .spam First remove the .spam references Second the text path is used to control the initial location of the letters in the sentence, play with the textpath making it a simple flat line Experiment with path by exploring the options in W3C SVG pages Excuse spelling iPod

Upvotes: 0

Related Questions