Learning how to apply JS to SVG elements...

[Gene Velazquez]

Please tell me how to apply Javascript to SVG elements. Very familiar here with vector files but never had to apply functionality. Are there videos or whitepapers or books that explain step by step the process to put JS on an element? Attached is a SVG file of an aircraft, how do I apply JS to move it in an SVG canvas?

Many, many thanks.

[Ian Johnson]

Hi Gene,

Are you familiar with html + javascript? SVG is just special html that is more suited for drawing.

I would recommend starting with Scott Murray's blog series (and then his book): 

you might check out my random assortment of d3 technique videos:

I also loaded your svg file into tributary and made a simple interaction example using the drag behavior:

http://tributary.io/inlet/6505578

(i had to make a slight modification to the svg to add the "plane" id to the first <g> element so i could move the entire plane in one go)

On Mon, Sep 9, 2013 at 7:43 AM, Gene Velazquez <genevel...@gmail.com> wrote:

Please tell me how to apply Javascript to SVG elements. Very familiar here with vector files but never had to apply functionality. Are there videos or whitepapers or books that explain step by step the process to put JS on an element? Attached is a SVG file of an aircraft, how do I apply JS to move it in an SVG canvas?

Many, many thanks.

--
You received this message because you are subscribed to the Google Groups "Tributary" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tributary+...@googlegroups.com.
Visit this group at http://groups.google.com/group/tributary.
For more options, visit https://groups.google.com/groups/opt_out.

--
Ian Johnson - 周彦

http://enja.org

[Ian Johnson]

forgot this link for Scott's tutorials

http://alignedleft.com/tutorials/d3

[Gene Velazquez]

Hello Ian,

Beautiful! You did a nice job; I have been using Illustrator for 20+ years, with limited knowledge of HTML and almost none of Javascript. Cannot thank you enough for the tips.

--

Gene

[Ian Johnson]

glad I could help :)

I realize i also forgot to link my videos:

http://youtube.com/enjalot

i'd suggest checking out my dot enter or dot append playlists, as well as some of the bayd3 meetup videos

[Geoffery Miller]

I did a few experiments dropping in the SVG code from illustrator and then accessing it with code in tributary.

http://tributary.io/inlet/5766820

http://tributary.io/inlet/5729452

I copied the raw text SVG data saved from illustrator into a new tab in tributary.  I may have added some IDs to some of the elements, or found the IDs that were already there.  Then I selected some of them with D3 and tinkered around with some animation and transitions.

In case it helps at all :)

Geo

[Evan Bollig]

Great stuff Geo!

-E

> --
> You received this message because you are subscribed to the Google Groups
> "Tributary" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to tributary+...@googlegroups.com.
> Visit this group at http://groups.google.com/group/tributary.
> For more options, visit https://groups.google.com/groups/opt_out.



--

-Evan Bollig
bol...@gmail.com
bol...@scs.fsu.edu

[Geoffery Miller]

Might have to do a little work in importing an SVG back into illustrator though...

http://imgur.com/1XMTGT4

Gotta say, the error message made me laugh.  "CANT".  I think that might be my error message for everything from now on.  It's probably something simple.  I'll see what I find out.

Geo

[Ian Johnson]

Lol, gotta love adobe...

Too bad you'd have to take away points from your students for an error message like that.

I haven't seen it before tho, curious as to what you find out!

[Geoffery Miller]

I think it just had something to do with the text element I was using.  SVG's with lines and other shapes seem to have no problem with no modification if I copy the SVG html from the chrome inspector and paste it into a file.svg and open with illustrator.

Geo

[Chris Viau]

Here is an old tutorial I made for going back and forth between D3 and Inkscape.

http://christopheviau.com/d3_tutorial/d3_inkscape/

It is the same with Illustrator excepts that it's easier to add IDs directly from Inkscape, as SVG is its native format. An easy way to go back to Illustrator is to print it as pdf and import it. SVG support in Illustrator is pretty poor though. 

Chris Viau