Questions tagged [raphael]

Raphaël is a cross platform JavaScript library for outputting vector graphics in both standards compliant SVG (for Firefox, Chrome, Internet Explorer 9+ ...) and VML for older versions of Internet Explorer.

Raphaël is a JavaScript library that provides cross platform creation and manipulation of vector based graphics in either SVG or VML format. It supports, among other browsers, Firefox 3.0+, Chrome 5.0+, Safari 3.0+, and Internet Explorer 6.0+.

In addition to providing functions for the programmatic creation of vector graphics, Raphaël also provides a rich set of functions for adding interactivity to objects, transitioning state of an object (e.g. slowly changing color, rotation, etc), and complex animations of objects.


Documentation


Related tags

2976 questions
1
vote
0 answers

Raphael.js markers and click events

I have a graph made in gRaphael.js with 3 different plots each with their own tags I use hoverColumn method to display the data for each of the tags on the 3 plots. I want to display extra information when I click on one of the tags. I want to know…
andrei
  • 8,252
  • 14
  • 51
  • 66
1
vote
1 answer

raphael + mapSvg fadeout

I need some help,I'm using mapSVG in this code that creates a map of my country, where every region has its own path, with its own id, so this is what I want: When I click on a region, I need it to fade out(1000 ms) together with the whole map of…
boska0712
  • 65
  • 7
1
vote
0 answers

Parse SVG to Raphael Javascript

Alright so I know some people have already asked this. However those questions are about two years old and I checked out the links to libs that they were suggesting and none of them work for what I need. I have googled this extensively trying to get…
j0hnstew
  • 709
  • 8
  • 25
1
vote
1 answer

Integrating a Raphael library within SVG-edit. Compatibility issues?

Is it possible to use a Raphael library such as this one : https://github.com/poilu/raphael-boolean within SVG-edit, that uses plain SVG? : SVG-edit website:https://code.google.com/p/svg-edit/ I have tried to marry them both but i am guessing they…
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
1
vote
1 answer

How would I determine the relative position of a point on a polygon?

I'm gonna start with an apology, I'm struggling to articulate this question, so I'll begin with what I'm trying to achieve. I am using Javascript with Raphael. So, I'm trying to store the position of a point relative to the four corners of a…
Fraserr
  • 151
  • 1
  • 8
1
vote
2 answers

How to get the width of the paper canvas of the Raphael javascript library, which is defined with relative values?

I am playing with the Raphael SVG library and I defined a element holding the Raphael canvas
and I placed the Raphael canvas/paper inside it : paper = new Raphael(document.getElementById('canvas_container'),…
karlitos
  • 1,604
  • 3
  • 27
  • 59
1
vote
1 answer

inline-SVG animation best practice

What is the way to animate inline-SVGs?! I want to do some animations on paths. Like rotate on some event, animateMotion on multiple paths also triggered by some event. I'll include a link to the Dev-site: http://www.myradon.net. I'm trying to…
myradon
  • 421
  • 1
  • 4
  • 13
1
vote
2 answers

Creating a pattern element in svg using raphael

I have some pattern in svg that I applied to my rect, the code is like this
MKoosej
  • 3,405
  • 3
  • 21
  • 29
1
vote
1 answer

Rotating text in Raphael is scrambling text

I'm trying to do translate and rotate text and it seems to be scrambling my text pretty badly. I have an example here. http://jsfiddle.net/WAbZz/ var paper = Raphael("ocular", 500, 500); var label = paper.text(100, 100, "Coeur et…
JoshLfive
  • 11
  • 2
1
vote
1 answer

Raphael js unable to create canvas by referencing div

Ive been trying to get this to work for a couple of days now. In the end I just created the canvas manually by entering parameters, but now I actually need to connect it to a div. The problem is, when trying to create the canvas based on a div, I…
RonnyKnoxville
  • 6,166
  • 10
  • 46
  • 75
1
vote
1 answer

Virtual area around vml element

this is my first post, so my deepest excuses if something went wrong :) I have a little html-control to write and biggest problem is ie6-8 support. There are no alternatives to skip ie6-8 support at all :( So after searching a while, I did found…
1
vote
0 answers

IE8-friendly bar chart with movable brush overlay?

I'm looking for a chart library that can generate something like this: In other words, a dynamically generated bar chart, with a movable brush overlay - the user should be able to move the range by clicking and dragging, and that event should…
Richard
  • 62,943
  • 126
  • 334
  • 542
1
vote
1 answer

Animate text in div element together with Raphael SVG element

I would like to get a button-like object consisting of a SVG rectangle as the background and HTML text in the foreground. The Raphael SVG library offers nice possibilities to create, modify and animate SVG elements. I found a solution to draw HTML…
karlitos
  • 1,604
  • 3
  • 27
  • 59
1
vote
1 answer

RaphaelJs ViewBox zoom to point

I made a jsfiddle long time ago to demonstrate how to zoom to center (http://jsfiddle.net/Y69nm/1/). now i want to zoom to a given point (cursor), just like googleMap, but no idea how to do. I send the actual mouse coordinate to the function which…
user1930254
  • 1,251
  • 5
  • 17
  • 32
1
vote
0 answers

raphael js font-size auto adjust

I have a drawing that is edited in one screen - all paths drawn are saved in DB as percentage coordinates (as I know the width and height of the paper). This is like this because I then display the same drawing in different sizes on other pages (so…
Jason
  • 143
  • 1
  • 17