CODEWITHSUNDEEP
javascriptxmlsvgraphael
camdub
camdub

Reputation: 887

When I convert an SVG to a Raphael JS object, the paths don't show up

I found this SVG file online that I want to use with Raphael, so i went about taking the d attributes of the path and putting them into a JS object. In the code I loop through the JS object and create Raphael paths. When I open the file in the browser, nothing shows up and I can't figure out why.

I think that it is related to the SVG file. In the SVG file that I downloaded, each of the groups (the g tags) have a transform attribute. If I remove that attribute from the g tag and open the SVG file in a browser, that group is doesn't show up. So it seems like when I just copy the paths over something is lost.

I'm not sure how to get these paths to show up with raphael, any suggestions?

Resources:

Upvotes: 1

Views: 582

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60976

The paths probably do "show up", but outside your defined viewport. You will need to adapt the path coordinates to fit within your viewport, e.g by applying the transforms (you can do that with raphaël, but it's more efficient to make sure the path coordinates are properly transformed to begin with).

If you want to see where the paths are you can always increase your coordinate space, e.g by setting the viewBox to something big, e.g [x,y,w,h] = [-10000,-10000,50000,50000]. This might make the rendering appear tiny, but you should be able to quickly spot where your missing paths are.

Upvotes: 2

Related Questions