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

Raphaël animations using a frame timer

I am currently starting with Raphaël and I am having a hard time figuring out how to make animations in a flexible way using a frame with a timer. With KineticJS, this was very easy. All I needed was to write something like: var anim = new…
TKrugg
  • 2,255
  • 16
  • 18
1
vote
1 answer

RaphaelJS create rectangle using for loop with interval

Fiddle 1 In this fiddle I have created 5 rectangle shapes on a single row using a for loop. Also I have set an interval between each iteration so that instead of directly displaying 5 rectangles together, they are displayed one by one separated by a…
rohan_vg
  • 1,087
  • 3
  • 15
  • 27
1
vote
0 answers

VML line height. Any equivalent of SVG's dy attribute for text span (v:textpath)?

What's the closest equivalent to dy in VML - the VML attribute that can be used to set the line height (aka line spacing, leading, vertical text offset...) of text elements? Nothing in the official docs for VML textpath stands out, which makes me…
user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
1
vote
1 answer

Using a constructor to help populate Raphael & joint.js functionality

I'm building activity diagrams using joint.js, which extends raphael.js. It's pretty simple, here is an example. In this example, var r creates the raphael paper and attaches it to the identified div ID. c1, c2, c3 create the diagram boxes. The…
Mike Earley
  • 1,223
  • 4
  • 20
  • 47
1
vote
0 answers

Erase a path in raphael.js?

After looking at the documentation of raphael.js, I was only able to find the Paper.clear() and Element.attr({'clip-rect':...}) methods for "erasing" the paper. The former erases the entire paper and the latter clips parts of existing elements. Is…
TheOne
  • 10,819
  • 20
  • 81
  • 119
1
vote
1 answer

Zooming on DOM-elements: Scaling vs transform

I have a grid of zoomable div elements. When a div is clicked, it is zoomed, scaled and centered using Zoomooz.js. Inside each div is a drawable region (like Canvas) implemented using Raphäel. My problem is that even though the zoom function work…
Lasse
  • 349
  • 1
  • 7
  • 16
1
vote
1 answer

Object with properties vs. OR in javascript

I`m having problem with javascript OR operator. Take a look at following code: $(trail1.node,circle1.node,text1.node).qtip({ content: { text: 'this is a test', title: {text: 'test', button: 'close'} …
1
vote
0 answers

Progress Indicator for Signup form

I'm having trouble getting started on this problem as I'm primarily focusing developing the home page. The desire is to have a progress indicator of sorts for the signup form that obviously shows progress as the form nears completion BUT it is a…
computer_smile
  • 2,117
  • 2
  • 24
  • 42
1
vote
1 answer

Raphael JS problems in Firefox 3.0.12

I have been working quite a bit with Raphael SVG/VML library, the website states it supports Firefox 3.0+. I have however encountered a problem using the latest version of Raphael and jQuery 1.8.3. I am able to create a paper var paper =…
Jon Taylor
  • 7,865
  • 5
  • 30
  • 55
1
vote
0 answers

how to drag set obtain path rect

I created an image that I want the overall drag this image, and how to do it, I hope someone can help me, Thank you var paper=Raphael("canvas",1000,1000); var draggableset = paper.set(); var rect3042 =…
1
vote
1 answer

How do I set rotation origin for a raphael.js animation?

I have 8 paths generated thusly: for (i = 0 ; i<8; i++){ slices[i] = card.path("M320 120 L320 215").attr({"stroke" : "#00A5Df", "stroke-width" : 10}); } I want them to rotate from origin of M320 120(start of the line) in a clockwise…
Pete Leaning
  • 486
  • 2
  • 15
1
vote
1 answer

showing titles in IE9 and Opera

I made a website http://zielonyzoliborz.pl/ using svg with Raphael, when u mouseover of any building tooltip shows up on the screen (FF, Chrome, Safari) but not in IE9 and Opera i even set up standard title for the IE8 which works but is not the…
gidzior
  • 1,807
  • 3
  • 25
  • 38
1
vote
0 answers

Raphael not adding an id nor data attribute

Hopefully someone has an answer because looking at the example code in the documentation and the 'Free Icons' script I just can't see how this isn't working. My issue is I am trying to create a beanie (hat). This beanie is made up of a number of…
1
vote
1 answer

Undo toFront in Raphael?

I want an element to come to the front only on hover, and then go back to the z-index it was at before when I mouse off. Is there a way for me to do this in Raphael; save the element's current z-index before calling toFront, then apply it again?
ario
  • 1,727
  • 4
  • 19
  • 28
1
vote
1 answer

trying to target a property name using the equivalent input name attribute value

I'm working with an svg built with Raphael, and using a form to make parts of it editable. I have path variables similar to the following: uk.isle_of_man uk.republic_of_ireland uk.england and input fields like: