Raphael JS - Parsing an SVG on the fly

Posted by Chris on Stack Overflow See other posts from Stack Overflow or by Chris
Published on 2010-05-17T22:36:24Z Indexed on 2010/05/17 22:40 UTC
Read the original article Hit count: 987

Filed under:

raphael-js

|

svg

|

Xml

|

parsing

I found a neat SVG parser at http://bkp.ee/atirip/ which parses an SVG file and outputs it into javascript that uses the Raphael JS library (raphaeljs.com). You'll notice in the source code at http://bkp.ee/atirip/svg2rdemo.php :

<script>
  jQuery(document).ready( function() {
    $("#c1").each(function(){  
    var c = Raphael(this, 190, 154, 0, 0);
    var g1 = c.set();
    ...

it creates variables like g1, g2, etc. But it also reuses these variables. I would like to create unique variables for each group. In my .ai file, I have named my groups and I would like to use these names to create the variable names.

Where in http://bkp.ee/atirip/f/svgToRaphaelParser.php.zip should I look to make this change?

© Stack Overflow or respective owner

Related posts about raphael-js

Raphael js text positioning: centering text in a circle

as seen on Stack Overflow - Search for 'Stack Overflow'
Hey everyone, I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a dynamic way to find the height/width of… >>> More
Detecting wether a point is inside or outside of a raphael.js shape

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a raphael.js shape which I am plotting circle's on top of. I only want a circle to appear if the circle does not go off the boundary of the shape it is being plotted on to. To make this more clear, here is an example of what I do not want to happen: I want the circles outside of the grey… >>> More
Can RaphaelJS be object aware?

as seen on Stack Overflow - Search for 'Stack Overflow'
In the course of trying to figure out whether it's possible to contain text within the boundaries of a rectangle using RaphaelJS (and without doing what would seem to be a lot of work), I came across this question (and its answer) which intrigued me. I haven't seen--either before or since reading… >>> More
Raphael js library: problems with animateAlong in IE7

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there, I'm having trouble making a simple shape move along a path in IE7 (the only version of IE I tried, actually). The following code works fine in chrome and firefox, but not IE. I couldn't find an obvious reason, has anybody seen something similar? canvas.path(rPath.path).attr("stroke", "blue"); var… >>> More
Illustrator CS4: SVG Export error "Transforms are Expanded"??

as seen on Super User - Search for 'Super User'
I get the following error when trying to save my image to SVG (via "Save Copy As"): Transforms are expanded. When I try to load the SVG in another program, all I get is a blank canvas. I ultimately want the path data to feed into RaphaelJS, but the path data that I got by clicking on the Show Code… >>> More

Related posts about svg

Firefox -- Dynamically embedding <svg> element in SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I am trying dynamically to append an <svg> element within an existing SVG island on an XHTML page (Firefox 3.6.3). Done manually, this works as expected: <svg xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg"> ... </svg> </svg> However… >>> More
manipulate objects outside svg with javascript-function inside the svg

as seen on Stack Overflow - Search for 'Stack Overflow'
Hello! I'm embedding a svg-graphic on my website and i'd like to manipulate the rest of the website with javascript-commands which are in the svg - though i'm not sure if this is possible. Let me elaborate: I've got a worldmap in svg, i want to click on a country and this click should run an ajax-call… >>> More
javascript replace text with images problem

as seen on Stack Overflow - Search for 'Stack Overflow'
I'm extremely new to JS and have this code that I'm trying to tweak. WHen I was adding the array, I had tested it with only a couple of items and it was working fine, now it just doesn't work, and I can't figure out what is wrong with it!! Basically, I'm trying to change every instance of a card… >>> More
SVG Salamander example?

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi there. I'm toying with Java and SVG Salamander but cant quiet get how to render a simple SVG file into a Jpanel. Could someone give me a brief example? Tried to follow the loose tutorial in the official site, but could not find a simple code to get a better understanding. So, some code is really… >>> More
Simulate Pivot Rotate Using Transform In SVG

as seen on Stack Overflow - Search for 'Stack Overflow'
I have a rectangle in SVG that I need to rotate on a pivot from a specific point. The best way I can see to do this is transform to the xy of the pivot, rotate the degree, and then transform again. The problem is the xy of the second transform. I assume its going to take cos and sin to some extent… >>> More