Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery SVG Drawing Text

Tags:

jquery

svg

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?

like image 816
CDrnly Avatar asked Nov 27 '25 13:11

CDrnly


1 Answers

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'}
    ); 
like image 102
bob quinn Avatar answered Nov 30 '25 06:11

bob quinn



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!