JQuery SVG Drawing Text

Question

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?

score 3 · Accepted Answer · answered May 22 '12 at 00:16

3

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

answered May 22 '12 at 00:16

bob quinn

541
5
17

What is a difference between 2 text methods: 1st - which has 'g' as a first parameter and 2nd - which has array as a 4th parameter...? If I user 1st one it will always put text underneath of other graphics (http://stackoverflow.com/questions/20851768/jquerysvg-how-to-position-text-on-top-of-circle/20852171?iemail=1&noredirect=1#20852171) – Budda Jan 02 '14 at 03:08
1

The difference is that the first uses Raphael's svg.group() to create a group object, and initialize attributes common to the group. The svgtext() calls then reference the object 'g' as they add a text string and its x,y position to the group. Hence, no need to init attributes for each string. The second method does not reference a group object, so each call must include any relevant attribute values. As far as its layering above or below other Raphael elements, see: http://stackoverflow.com/questions/6566406/svg-re-ordering-z-index-raphael-optional – bob quinn Jan 16 '14 at 18:33

score 0 · Answer 2 · answered Nov 06 '11 at 20:59

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

JQuery SVG Drawing Text

2 Answers2