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
3 answers

Transforming to bound box with Raphael.js

I am in need of some math help. I am trying to dynamically transform my Raphael set of elements to a given bound box within my canvas. For example, say my canvas (paper) is 600 x 300 and is filled with paths. These paths are all in a set. Now I want…
slth
  • 71
  • 1
  • 3
1
vote
0 answers

PDF to SVG, SVG to Raphael Objects

I have searched around and can't seem to find what I am looking for so I am hoping someone here can help me find it or just tell me that its not possible unless I want to write my own. I am trying to import a PDF and convert that PDF to SVG and then…
j0hnstew
  • 709
  • 8
  • 25
1
vote
1 answer

Raphael.js - HowTo Pie Chart Donut Style with bent labels in donut sectors

I want to make a pie chart in donut style with bent labels in the particular donut sectors, like this one: In this mockup, the user has clicked on the "Raphael.js" sector. Now for the clicked sector there should also be an event handler which is…
eff8691
  • 67
  • 7
1
vote
2 answers

Using RaphaelJS vector graphics library - Help interperting example

I'm looking at the source code for this http://raphaeljs.com/australia.html example, and trying to interpret what has been done in order to create a similar project using the RaphaelJS graphics library. I am, however, confused about part of the…
Krausers
  • 171
  • 1
  • 1
  • 7
1
vote
2 answers

Striped oval using SVG

I have built a bordered and striped oval in CSS, and I would like to do something similar with SVG. I'm completely new to SVG, and I've tried using Raphael. This is as far as I got (see fiddle here): var paper = Raphael(150, 150, 320, 320); var oval…
Randomblue
  • 112,777
  • 145
  • 353
  • 547
1
vote
2 answers

Embed SVG with RaphaelJS

I am developing a SVG viewer for a web application. I have to work with existing SVG files and deal with them to show tooltips, do effects with mouse events... I have looked for a good library to do that and RaphaelJS seems useful and it has IE…
jbernal
  • 785
  • 1
  • 14
  • 29
1
vote
1 answer

Animating "Painting" of an image onto the paper in RaphaelJS over a path

I am looking to animate an image onto a canvas via a circle 'brush' [Think Photoshop default brush] wherever the circle moves on a path the image is revealed. The image would be a bitmap, not a vector file. The brush will not have any additional…
BorisKourt
  • 187
  • 2
  • 15
1
vote
2 answers

Calculating a percentage with mouse position considering half-circle

I just tried to code some tricks on justGage (using Raphael JS code) to calculate percentages but I'm stuck on mathematical formula :( . Here's the point : I have a div with 400px width that welcomes a svg justGage. I would like to make it filling…
user1713964
  • 1,209
  • 2
  • 14
  • 26
1
vote
1 answer

How to access Raphael fill image in VML

I want to access VML element which stores fill image in VML. I pasted my demo code below. Notice that it will only work when you include raphael.js and jquery.js.
Karol
  • 7,803
  • 9
  • 49
  • 67
1
vote
2 answers

How to prevent loss hover in Raphael?

I'm developing some page when I use Raphael liblary to draw some items. my App So my problem is in that when I'm moving to some rect it growing up but when my mouse is on text which is positioning on my rect, it loss his hover. You can see it on my…
Mateusz Rogulski
  • 7,357
  • 7
  • 44
  • 62
1
vote
1 answer

raphael demo pie chart tweak to add custom colors

How can I add custom colors to this raphael pie chart. http://raphaeljs.com/pie.html It grabs values from HTML table and inserts them into a pie chart. Right now it uses the following to fill sectors. I think it uses a randomizer to select hex…
madphp
  • 1,716
  • 5
  • 31
  • 72
1
vote
1 answer

How should I put labels on images?

I have a set of unlabeled images which I need to present labeled and unlabeled. I have the label text and positions. I do not want to have two images (labeled and unlabeled); rather, I want to put the text over the image, either in…
pjmorse
  • 9,204
  • 9
  • 54
  • 124
1
vote
2 answers

How do I add custom HTML in Rally sdk 2.0?

I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function. launch: function…
Jason Gerstorff
  • 266
  • 1
  • 5
  • 13
1
vote
1 answer

raphael js, resize canvas then setViewBox to show all elements

I have a problem with my canvas. My canvas in first width = 1300, height = 500 Then I resize it to width = 800px, height = 500 I try setViewBox to zoom it. But mouse not fix with element when I drag them. @canvas.resize(800,…
Peter89
  • 706
  • 8
  • 26
1
vote
1 answer

move images away before refresh browser

In a html page I am making, I dynamically move images into the viewport using jQuery and Raphael's library. When I refresh the webpage, these images appears to be white block for <100ms before the webpage loads again. I want to move these images…
Hai Bi
  • 1,173
  • 1
  • 11
  • 21