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
13
votes
6 answers

graphael bar chart with text x-axis

I was wondering how I can make a simple bar chart that perhaps has day as the x-axis, with values 'today' and 'yesterday', and the y-axis as perhaps 'time' with corresponding values '1' and '2'. I guess I'm confused as to how to set text as the…
butterywombat
  • 2,069
  • 7
  • 26
  • 44
13
votes
4 answers

Move active element loses mouseout event in Internet Explorer

In a library I am using I have the task of moving an element to the front of the dom when it is hovered over. (I make it bigger so I need to see it, then shrink it back when mouse out). The library I am using has neat solution which uses…
johnwards
  • 1,901
  • 3
  • 18
  • 27
13
votes
1 answer

RaphaelJS: Creating click-through elements?

I need to overlay a label on top of multiple clickable elements. I want to be able to click on an element through the label on top of it. Is this possible? If so, how would I accomplish this?
neezer
  • 19,720
  • 33
  • 121
  • 220
13
votes
4 answers

How to achieve 'donut holes' with paths in Raphael

I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent). According to the W3 path spec: Compound paths (i.e., a path with multiple subpaths) are…
doctororange
  • 11,670
  • 12
  • 42
  • 58
13
votes
1 answer

How to know if raphael object is hidden?

I am creating a diagram application in which I hide and show few elements e.g. var c = paper.circle(10, 10, 10); c.hide() var c2 = paper.circle(10, 10, 10); c2.show() Now I want to act upon such shapes e.g. calculate bounding box etc but I am not…
Anurag Uniyal
  • 85,954
  • 40
  • 175
  • 219
13
votes
1 answer

merge images from Raphael svg

Trying to create Step 1 - Let users upload images through Ajax, Raphael and Raphael freetransform. Step 2 - Click button to show one image from merge upload images. (Question): I have found similar post about convert Raphael svg 1 2 3, so I'm…
vibskov
  • 275
  • 4
  • 16
12
votes
5 answers

How to add and remove glow for Raphael element?

I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out how to add the glow, but I am having trouble removing it. Here is what my…
jbranchaud
  • 5,909
  • 9
  • 45
  • 70
12
votes
1 answer

RaphaelJS library to find intersections of paths

I'd like to draw shapes which are intersections of circles using RaphaëlJS. Is there a library out there to do that already? A more general SVG path library would probably work too, but my google foo is failing me. I'd like to draw shapes like…
Douglas
  • 36,802
  • 9
  • 76
  • 89
12
votes
4 answers

Raphael JS Implementing a "Pencil" tool efficiently

I am working on a project that requires end users to be able draw in the browser much like svg-edit and send SVG data to the server for processing. I've started playing with the Raphael framework and it seems promising. Currently I am trying to…
Almost Famous
  • 569
  • 1
  • 6
  • 19
12
votes
7 answers

Creating a linear transparent gradient to a div

I'd like to create a linear transparent gradient to a div. Is there any way to do that with jquery? Or should I use some other library like raphaeljs? I'd like to achieve an effect like the following:
JohnDel
  • 2,092
  • 8
  • 35
  • 64
12
votes
2 answers

What are the pros and cons of HTML5 Canvas vs. SVG + Raphael.js?

I just started a project using the Canvas. But one of the things I need is to keep track of movable, clickable boxes as in this example : http://raphaeljs.com/graffle.html so I'm wondering if Raphael-js + SVG would be better. Which would you use?…
interstar
  • 26,048
  • 36
  • 112
  • 180
12
votes
4 answers

Challenging vector maths in JavaScript

I have a fun dev/math's problem that I can't get my head around solving. See the illustration below. I have two circles of dots; one small and one big. I want to: Draw a line from any given point in the outer circle to any given point in the…
Alex
  • 1,689
  • 18
  • 27
12
votes
4 answers

Simplest way to clear a container using raphaeljs javascript graphical library

I have to clear and redraw a raphael javascript main container. I've tried with var paper = Raphael(10, 50, 320, 200); paper.remove(); // Doesn't work paper.node.removeNode(); //this neither paper.removeNode(); //this neither Any idea?
Emilio
  • 3,901
  • 11
  • 44
  • 50
11
votes
5 answers

Painting shapes in Javascript

Is there any good alternative to the html5-element canvas to paint shapes like hexagons using javascript, that works cross-browser (including the horrible IE6)? I have been using jQuery and jQuery maphighlight for this, but it doesn't give me enough…
elzapp
  • 1,961
  • 4
  • 15
  • 22
11
votes
4 answers

Export SVG elements to PDF?

I have a visualization generated by d3 (a javascript visualization library similar to Protovis or Raphael, which draws stuff using SVG elements). The vis is interactive, so the user can interact with and edit it. Once the user is satisfied with…
raviparikh
  • 295
  • 1
  • 4
  • 11