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

2986 questions
255
votes
14 answers

jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I don't need…
Luke Dennis
  • 13,172
  • 17
  • 52
  • 66
86
votes
3 answers

How to access SVG elements with Javascript

I'm messing around with SVG and I was hoping I could create SVG files in Illustrator and access elements with Javascript. Here's the SVG file Illustrator kicks out (It also seems to add a load of junk to the beginning of the file that I've…
gargantuan
  • 8,670
  • 14
  • 63
  • 105
69
votes
6 answers

SVG re-ordering z-index (Raphael optional)

How can I reorder Raphael or their underlying SVG elements after creation. Better yet, do something like layers exist in SVG? Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If…
Miles
  • 1,289
  • 2
  • 12
  • 18
54
votes
4 answers

D3.js vs Raphael.js

I'm fascinated by both d3 and Raphael. I understand that Raphael is built on top of D3 and that it is cross-browser compatible, but I'm not sure which one is better suited for what scenarios. Can somebody please shed some light? My immediate…
Nick
  • 3,702
  • 4
  • 26
  • 41
46
votes
4 answers

Raphael JS and Text positioning?

I'm trying to position text within the SVG canvas, by supplying x, y coordinates var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"); but does not position the text like all other objects... x, y coordinates specify the center of the object! Not…
RadiantHex
  • 22,589
  • 43
  • 141
  • 236
43
votes
4 answers

How can I combine objects in the Raphael javascript library?

Sorry for a long question but here goes. I am trying to modify the drag shapes around demo here: http://raphaeljs.com/graffle.html The demo works fine. What I want to do is put words inside the shapes and move the shape and text around as a…
johnny
  • 18,093
  • 48
  • 144
  • 235
35
votes
2 answers

Programmatically creating an SVG image element with javascript

Like my title says, I'm trying to programmatically creating an SVG image element in a HTML page using javascript. For some reason my basic javascript code isn't working, however if I use the raphaeljs library it works fine. So there's obviously a…
Yansky
  • 4,030
  • 8
  • 27
  • 23
35
votes
5 answers

Photoshop Custom Shape to SVG path string

Is there any way to get the SVG path string off a Photoshop custom shape or path? Or is there another way to get/construct similar data? I'm looking to do something similar to this: http://raphaeljs.com/icons/
Will Haynes
  • 738
  • 3
  • 8
  • 14
33
votes
4 answers

How to make a pattern "fixed" in Raphael.js / IE?

I'm creating a small tool to illustrate the benefits of polarizing lenses. Basically a user will drag the lenses (a Raphael.js path) over a dazzling scene (the CSS background of the container DIV) and "see through" the lenses. Here is the js…
Paolo Stefan
  • 9,358
  • 4
  • 43
  • 63
33
votes
1 answer

Kineticjs vs Raphaeljs

I'm starting a new project using HTML5. Two of the most popular graphical toolkits are KineticJS and RaphaelJS. If you have experience of using these, do you have any advice? Which features do they offer, and is there an advantage in using one over…
Artur Keyan
  • 7,403
  • 12
  • 49
  • 64
32
votes
3 answers

how to change svg text tag using javascript innerHTML

i was using raphaeljs , and i want to show html(not only text) in svg, so i use this code : var r = Raphael("holder", 200, 300); var t = r.text(10, 10, "ssdwqdwq"); t.node.innerHTML='dddd' but i cant change the svg's content , so i console it in…
zjm1126
  • 30,692
  • 52
  • 112
  • 161
32
votes
4 answers

Draggables and Resizables in SVG

I want to make an svg element (path, rect, or circle) be able to be draggable and give it resize handles. But unlike HTML DOM, not all elements have an upper left hand corner x,y coordinate and a width and height for a box surrounding the content.…
Boris Yeltz
  • 2,201
  • 5
  • 20
  • 20
29
votes
7 answers

how to add a css class to a Raphael object

I'm trying to create a webpage which using a lot of Raphael objects like lines, rectangles, circle. I'm using different colors for each of the event on these objects like onmouseover one color, onmouseout another etc.. So since I have a lot of…
sgbharadwaj
  • 395
  • 2
  • 5
  • 9
29
votes
5 answers

How to identify if a mouseover event object came from a touchscreen touch?

On virtually all current browsers (extensive details from patrickhlauke on github, which I summarised in an SO answer, and also some more info from QuirksMode), touchscreen touches trigger mouseover events (sometimes creating an invisible…
user56reinstatemonica8
  • 27,132
  • 16
  • 87
  • 109
29
votes
5 answers

How to either determine SVG text box width, or force line breaks after 'x' characters?

I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document. Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width…
Jack Roscoe
  • 4,063
  • 10
  • 34
  • 45
1
2 3
…
99 100