Stack Overflow
Stack Overflow

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
20
votes
5 answers

Graphael line chart

Is there a good tutorial for Graphael (special line charts), I currently trying to implement such a graph with grafael http://www.highcharts.com/demo/?example=line-time-series&theme=default unfortunately there is no documentation.
Rhabarber
  • 201
  • 1
  • 2
  • 3
20
votes
1 answer

raphaeljs drag and drop

I am using rapaeljs for my web app. I want to set dropable boundries of the object. Object can move in dropable area. Once an object come in dropable area, there should be no way out for the object.
Abdul Rauf
  • 675
  • 3
  • 10
  • 18
20
votes
3 answers

What is a "matrix" for in raphael

I'm trying to get a better understanding of raphael.js in general, but i've found that the raphael.js documentation can be confusing at times and at other times a bit vague. can anyone explain to me what matrix is for and how it is used?
zero
  • 2,999
  • 9
  • 42
  • 67
19
votes
2 answers

SVG draws outside canvas boundary in Internet Explorer 9

I am using the Raphael Javascript library to do some rudimentary drawing for a web page. I am just drawing some lines that radiate out from a point. In Chrome, Firefox, and Opera, these lines are subject to the size of the SVG canvas. This is the…
Christopher Knowl
  • 263
  • 1
  • 3
  • 6
19
votes
7 answers

Making paths and images draggable in Raphael js

Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js? I want to add in paths and images which you can then move around but its proving tricky. I would like to work this out with…
Decodal
  • 223
  • 1
  • 3
  • 8
18
votes
3 answers

html5 canvas - animating an object following a path

I'm a bit new to canvas and such so forgive if it's a trivial question. I'd like to be able to animate an object following a path (defined as bezier path) but I'm not sure how to do it. I've looked at Raphael but I can't work out how to follow the…
Ben
  • 20,737
  • 12
  • 71
  • 115
18
votes
3 answers

Applying rounded corners to paths/polygons

I'm gathering some info for a project that has to start within a few weeks. This project contains a browser-based drawing tool where users can add predefined shapes or forming shapes themselves. Shapes must be selectable, freely scalable and…
MaPaBa
  • 191
  • 1
  • 1
  • 3
18
votes
1 answer

Raphael SVG animations choppy in some browsers

I have an SVG object that I am adding to my page using Raphael. With roughly 175 paths in 6 sets I suspect it counts as complex. I am animating each of the 6 sets using the .animate function function anim(direction, duration){ return…
Alex C
  • 16,624
  • 18
  • 66
  • 98
18
votes
5 answers

How to save an svg generated by raphael

Is there a way to save the SVG generated by raphael as an svg file. Note it only need to work in chrome.
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297
17
votes
3 answers

Raphael canvas (background) onclick event

I have been working with Raphael to create drag and drop shapes on a canvas. I do this using the .drag() function (supplied in the Raphael framework) along with my event functions. I have no issues doing this. I also have a function that creates a…
Adam Holmes
  • 1,783
  • 3
  • 20
  • 32
17
votes
2 answers

Full size background-image to SVG path

I've been using Raphael JS (…it's brilliant). I was just wanting to understand how I can add a background-image and background-size (cover) to my SVG path I created with Raphael. Is this at all possible? What I have tried: I've tried adding a…
WPZA
  • 841
  • 1
  • 10
  • 27
17
votes
3 answers

jQuery offset top doesn't work correctly

I'm trying to create an script draw something in an element by mouse and I'm using Raphaeljs to do that. For correct drawing I need to find top and left of ‍input‍‍ element. I'm using var offset = $("#input").offset(); to get left and top. But the…
ahmadali shafiee
  • 4,350
  • 12
  • 56
  • 91
17
votes
1 answer

How can I add an element to the SVG DOM

I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael. I want to allow the user to save a merged rasterised version of this when they are done (i will be doing something else with SVG version myself) When the…
Danny Browne
  • 293
  • 1
  • 2
  • 7
16
votes
1 answer

Convert Raphael SVG to image (png etc) client side

Possible Duplicate: Convert SVG to image (JPEG, PNG, etc.) in the browser I have a small project where users construct a diagram using Raphael and then export the composed diagram to an image to save. Problem is it has to run offline.…
mitch
  • 161
  • 1
  • 1
  • 3
16
votes
5 answers

How can one add drop shadows to Raphael.js objects?

I would like to find out how to add blurry edged drop shadows to Raphael.js objects/paths. As far as I know it is not possible with the library as is but is there a work around?
pylonicon
1 2
3
…
99 100