SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery SVG plugin: gradient not rendering

    I am using jQuery and an extension that adds SVG functionality (keith-wood.name/svgRef.html). Sometimes I have some SVG in a string and want to add it to the document. This seems to not work for the linearGradient element. It shows up in the DOM, but the gradient is not actually displayed.

    I have prepared an isolated example that should show two rectangles with gradients. In the second case, I used some SVG from a string and the gradient does not show up.

    ludiexmachina.com/games/maze/test.html

    Edit: This appears to be a Firefox problem. It works fine in Opera.
    Edit 2: It appears to be a capitalization problem. Somewhere in the code it changes "linearGradient" to "lineargradient". I can now work around the bug pretty easily.

    You can view the DOM and the source on that page to see what I'm talking about.

    How do I get my gradient to show up?
    Last edited by vzx; Jul 15, 2008 at 12:57.

  2. #2
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am new with jquery SVG plugin. Does jquery's event binding work with it? Could someone help me with an example to change the location of one of the square in

    ludiexmachina.com/games/maze/test.html by a mouseover or a click?

    Thanks,

  3. #3
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure thing. Assign the object to a variable when you make it:
    Code Java:
    var rectangle = svg.use(null, '#myRect');

    Then bind away!
    Code JavaScript:
    $(rectangle).click(function(){
        $(this).animate({'svg-transform': 'translate(8, 8)'}, 250)
    })

    Just be sure to prefix the attribute name with "svg-".

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi vzx,

    Thanks for a quick reply. I try it. It seems it is not working. Could you put it into your test site? Thanks,

    Tak

  5. #5
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to include the animation script, jquery.svganim.js, in addition to jquery.svg.js and jQuery itself.

  6. #6
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, vzx, after putting in svganim package, the square moves as your designed. Now I have to make it Drag & Drop with the mouse. It seems your way of event binding is different from what described in "Jquery in Action" book.

    Thanks again for your help.

    Tak


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •