dukejones edited this page Sep 2, 2011 · 29 revisions
Clone this wiki locally


Q. Why is SVG feature X not supported by Raphaël?
A. Raphaël is not an API for SVG. It uses SVG and VML to render graphics cross-browser. That means that it supports only features that can be implemented in SVG and VML.

Q. I wrote a really awesome implementation of SVG feature X for Raphaël. Why didn’t you accept my patch?
A. If your patch doesn’t include identical functionality implemented in VML, it will not be accepted.

Q. Can I export a Raphaël canvas to SVG, JPG or PNG?
A. If you can get the resulting SVG string, canvg can render it to Canvas (and you can save into PNG/JPEG/BMP using the canvas API), currently a good amount of common SVG spec is supported. (see demo on project site)

Q. How can I convert/import my SVG file into Raphaël?
A. The below location has 2 tools for SVG to Raphaël conversions.
They have limitations but are being upgraded continually..

More information is at:

Q. How can I get/set an element absolute coordinates?
A1. For a raphael element r, you can get its absolute coordinates with r.getBBox().x+","+r.getBBox().y) and set its absolute position with for example r.attr({x: 30, y: 70}). Also note that in the case of circle elements, you can also set the absolute position of its center with for example r.attr({cx: 30, cy: 70})
A2. I use a pure reusable little javascript solution..

You can always “know” the Absolute position by recording the additions to the x and y coordinates.

When you pass the Absolute coordinates to your function it simply removes the previous absolute positions from those parameters and feeds the translation with the calculated relative ones.

funkyfunc(AbsoluteX, AbsoluteY, Previous_AbsoluteX, Previous_AbsoluteY) { relativeX=Previous_AbsoluteX – AbsoluteX; relativeY=Previous_AbsoluteY – AbsoluteY; s.animate({translation :relativeX " "relativeY}, 800, “<>”); }

Q. How can I add scroll support to the paper?
A. An easy way is to put large paper inside an html element with css style overflow:scroll. That way, if the html element is smaller than your peper, you can scroll the paper’s content with the element’s scroll bars.

Q. Is Raphaël available in other languages ?

Q. Since the general function for linear transformations matrix is available both in SVG and in VML, why it is not available in Raphaël ?
The matrix operation is very hard to integrate, and also almost all linear transformations (like rotation, translation, etc) are already supported in Raphaël. Nevertheless, there is a not official plugin at http://github.com/cancerberoSgx/sgxRaphaelJsPlugins. See matrixTransf.js and matrixTest.js. Besides the matrix() operation, there is also support for linear transformations based on matrix() such as skew, rotation, reflection, etc.

Questions still to be answered

Q. Where can I find a road map for Raphaël? I would like to know definite planned enhancements and others that are marked as possible.

Q. How can I do drag and drop?

Note : Backed Up 6th June -Charles