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
1
vote
1 answer

Viewing text on mouse over in Raphael.js

I have some Rapahel circles and I need to view some text over them when I hover on them. Here is my code: var text = R.text(X, Y, "some text"); R.circle(X, Y, 10).attr({"fill-opacity":0.8, fill:color, stroke: "white"}) .mouseover(function ()…
hAlE
  • 1,283
  • 3
  • 13
  • 19
1
vote
1 answer

Paths and subpath don't manage the arc curve the same way

I'm having issue with generating arc curves with Raphael. I created a reduced example here: http://jsfiddle.net/vaxilart/m6cHw/3/ As you can see, the first path drawn isn't the same as the second one, and the second one is only a subpath of the…
Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
1
vote
2 answers

Raphael and preserveAspectRatio

With RaphaelJS, this command inserts an image:- var myImg = paper.image('image.svg', 100, 100, 150,150); and the SVG output is:- Question: How do I…
Alvin K.
  • 4,329
  • 20
  • 25
1
vote
2 answers

Where does come the offset in Raphael javascript

I really like the Raphael Javascript library which is very useful for handling SVG with javascript. However there is an offset value which is added to the generated svg code that I don't understand. Does anybody know where does it come from and how…
luc
  • 41,928
  • 25
  • 127
  • 172
1
vote
1 answer

corrective scaling using Raphael free transform plugin

I'm using Raphael Free Transform plugin to enable scaling, dragging and rotating. In this particular scenario I want to devote one handle for resizing and another one for rotating, hence scale option is set only on axis x. I want to compensate…
krul
  • 2,211
  • 4
  • 30
  • 49
1
vote
1 answer

Raphael JS background change

would like to know why the color of the rectangle change when I'm on the text. I would like the background color is always the same as I am in the rectangle. http://jsfiddle.net/yVzXF/11/ paper = new…
buffle
  • 197
  • 1
  • 2
  • 7
1
vote
2 answers

RaphaelJS with rgba gradient fill

I am trying to create a gradient fill with RaphaelJS that uses rgba colors. In other words, I want both the start and end points to have a degree of transparency. For instance, 20% black to 0% black. How is this done? This fiddle is how I expect…
Jeff
  • 13,943
  • 11
  • 55
  • 103
1
vote
1 answer

Convert SVG polygon points to path?

I am looking for a function that can convert something like: var points="270,328 270,376 342,376 342,368 358,368 358,320 314,320 298,336 278,336" into the SVG format for paths, I have seen this question / answer, but I get an error :Uncaught…
dezman
  • 18,087
  • 10
  • 53
  • 91
1
vote
2 answers

Getting the right index of an object in a loop in javascript

I have a list of nodes and I am going to draw each node using a raphael object. I have the following loop: for(var i=0; i
hAlE
  • 1,283
  • 3
  • 13
  • 19
1
vote
1 answer

Using Google Maps custom overlays to create custom icons (with Raphael JS)

I'm using Google Maps OverlayView class to create custom markers (with Raphael JS) and am having issues accessing certain properties of my new subclass when calling a public method. I followed Google's fairly straightforward example here ~…
user1383418
  • 664
  • 3
  • 8
  • 20
1
vote
1 answer

How to update raphael Text dynamically

I am drawing a flow chart based on Raphael shapes & Text. On page load, i drew the rapahel shapes with text inside. this text is some status. there is some background processing happening which is changing the status. Now i want to update this…
JDev
  • 347
  • 1
  • 4
  • 19
1
vote
0 answers

Javascript, draw animated path point after point

I have seen people drawing the animated path like this, but if I have an unknown number of points stored in an array, how could I use this callback progressively? window.onload = function() { var c= Raphael("canvas", 200, 200); …
Jolin
  • 1,515
  • 4
  • 21
  • 24
1
vote
1 answer

Raphael not working in IE

Hello all i'm working with morris.js graphs. The graph is displayed in Chrome but it is not working in IE 10. Here is the JS error i get Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.2; Trident/6.0; .NET4.0E;…
Vishnu Priyan Rangasamy
  • 185
  • 5
  • 16
1
vote
1 answer

Raphael drag text around the screen and tspan dy

here is my code for moving text around a canvas: paper .text(self.x, self.y, "Jeaaaaaaaaaaaaaaah") .attr({ fill: "#000", dy: 0, dx: 0, font: "italic 20px Helvetica" }) .drag( function(dx, dy) { …
piggyback
  • 9,034
  • 13
  • 51
  • 80
1
vote
0 answers

raphael draw continuous line

I am trying to draw continuous lines on raphael canvas. Say, line 1 starts from source A and ends at B, line 2 starts at B and this continues till the user triggers an event(stop drawing). How do i achieve this.? Thanks in advance. Priyanka
priyanka
  • 11
  • 1
1 2 3
…
99 100