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
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,293
  • 10
  • 37
  • 46
26
votes
4 answers

SVG Gradient turns black when there is a BASE tag in HTML page?

I am using the Raphaël JavaScript Library to create SVG elements in an HTML page and using CodeIgniter as a PHP framework. In the CodeIgniter framework I need to add a tag in the head of the HTML document to use JS,CSS and images, but it…
Max Abrahamsson
  • 1,460
  • 3
  • 17
  • 35
26
votes
2 answers

how to set font-size font-family

i have code like this but its not working var t = r.text(100, 100, 'test'); t.attr({font-size: 16}); giving me error missing : after property id here is documentation for raphael.js http://raphaeljs.com/reference.html
coure2011
  • 40,286
  • 83
  • 216
  • 349
25
votes
7 answers

drawing centered arcs in raphael js

I need to draw concentric arcs of various sizes using raphael.js. I tried to understand the code behind http://raphaeljs.com/polar-clock.html, which is very similar to what I want, but, whithout comments, it is quite difficult to fathom. Ideally, I…
user592699
  • 481
  • 1
  • 7
  • 15
25
votes
4 answers

How to do a tooltip on an SVG generated by Raphael

I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational. The problem I've run into is creating tooltips. So far, I've found three ways to do this: The…
mlissner
  • 17,359
  • 18
  • 106
  • 169
24
votes
3 answers

raphael.js - custom attributes

Is it possible to define a custom attribute for a raphael element? e.g. r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f', 'my_custom_attribute':'a value'}); Reason I need this is I want to do some quite complex animation on a whole set of…
boz
  • 4,891
  • 5
  • 41
  • 68
24
votes
6 answers

Zooming and panning svg images using raphael.js or some other js library

I am in need of a small script that will display an SVG (vector image) within a frame that has 2 functions; The image can be panned (moved around to look at different parts of the svg image with the cursor) simmilar to google maps. The SVG image…
Chandan Jog
  • 343
  • 1
  • 3
  • 5
24
votes
3 answers

Bubble tree in d3?

Is there an equivalent implementation of a Bubble Tree in D3? In the link I provided, the Bubble Tree was implemented in RaphaelJS and jQuery.
Legend
  • 113,822
  • 119
  • 272
  • 400
24
votes
4 answers

How Can i scale Raphael js elements on window resize using jquery

How can i rescale all the element inside a Raphael canvas on window change ? considering the following code / DEMO if i re-size my window only div container scaled since i set its width to 50% of the window width and none of the (rect , circle or…
Mina Gabriel
  • 23,150
  • 26
  • 96
  • 124
23
votes
3 answers

Raphael JS - Use a SVG file

I have seen several threads that adress this question but nothing that really solves my problem. I have a SVG file with a map and differrent regions ( http://www.mediafire.com/?5pmyevdwbyrb51f ). I want do do something like this:…
larschanders
  • 1,951
  • 3
  • 16
  • 21
21
votes
3 answers

Raphael canvas filling a container div

Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those…
at.
  • 50,922
  • 104
  • 292
  • 461
21
votes
4 answers

Raphael js text positioning: centering text in a circle

I am using Raphael js to draw circled numbers. The problem is that each number has a different width/height so using one set of coordinates to center the text isn't working. The text displays differently between IE, FF, and safari. Is there a…
HandiworkNYC.com
  • 10,914
  • 25
  • 92
  • 154
21
votes
1 answer

How to modify raphael text?

After instantiating Raphael text like so var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!"); how do I go about then modifying that text? t.text = "test"; did not work for me.
Xavier
  • 311
  • 1
  • 3
  • 5
20
votes
3 answers

URL for Raphael.js

I want to use Raphael.js in my blog. I want import it from another source as I can't host it on blogger. Do we have any site like Google code which hosts Raphael.js? Couldn't find it on Google code.
Ajinkya
  • 22,324
  • 33
  • 110
  • 161
20
votes
5 answers

Scaling SVG (Raphael.js) like an SWF

I started using Raphael.js a few days ago and I'm really enjoying it. The only thing I haven't been able to figure out is how to get the "paper" or svg/vml tag to fill the browser window like an swf. See this example. Note the way the above example…
Zevan
  • 10,097
  • 3
  • 31
  • 48
1
2
3
…
99 100