2

I'm messing around with Raphael.js and would like to import some SVG into Raphael Objects. I've checked some twitter posts from https://twitter.com/RaphaelJS where he is saying that you can copy and paste the path points and use them. Unfortanetly I can't get it to work.

What I would simply like to do is this simple svg:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">
<polyline fill="#CBBBA0" stroke="#000000" stroke-miterlimit="10" points="272.343,345.194 307.418,535.492 349.955,342.955 "/>
<circle fill="#E30613" stroke="#000000" stroke-miterlimit="10" cx="277.194" cy="282.881" r="62.313"/>
</svg>

into Raphael-Objects. Maybe you have some ideas how to solve this.

I thought it could be possible like this:

var paper = Raphael(10, 50, 320, 200);
paper.path(["272.343,345.194 307.418,535.492 349.955,342.955"])

bummer! Doesn't work

Thanks

supersize
  • 13,764
  • 18
  • 74
  • 133

1 Answers1

1

It's because you're looking at a polygon / polyline, not a path.

Convert the polyline points to a path d (definition) using something like in this. Then you'll get a path string that Raphael understands.

You can spot path definitions as opposed to polygon or polyline defintions because path strings always start with M.

For convenience, here's a JSBIN demo of the code on that above linked question where you can copy and paste in and convert any SVG polygons or polylines:

http://jsbin.com/avuzas/1/edit

Community
  • 1
  • 1
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
  • very nice workaround. Thank you for that, but then comes one question up again. Is there something similar for circles or ellipses, or do I have to make that per hand? eg. use `attr()` and fill it with the circle values and so on? – supersize Jul 11 '13 at 12:22
  • There are a few tools that automatically convert SVG into Raphael, I wrote up a few in an answer to a question ages ago... here it is, http://stackoverflow.com/questions/10452247/raphael-js-how-to-find-path-of-an-svg-image – user56reinstatemonica8 Jul 11 '13 at 12:41