raphael

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 <base> tag in the head of the HTML document to use JS,CSS and images, but it caused a strange problem in the SVG element. When I use the <base> tag, gradients do not work. Instead, the object turns black. It behaves exactly the same with image filled path objects. SVG Gradients are defined in the document with a unique id attribute, and then referenced from another element as a URL. Typically the URL is just the identifier

I have a fairly large SVG file of administrative subdivisions that I need to work with in Raphael.JS (it has 600 polygons and weights 1.2 Mb). Now, I need to convert these polygons to paths so that it works in Raphael. The great poly2path tool does that, but it doesn't support any batch command, so that each polygon's position relative to the others is lost. Do you know of any tool to convert SVG polygons to paths? (I also have the AI file which was used to export the SVG). Many thanks Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll('polygon,polyline'); []

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 of the box which will itself force the line breaks (I can't find any evidence of this being possible) OR ensure that a '\n' line break is inserted after a certain amount of characters. So (1) is this the best option? And (2) how would I do this? There isn't an attribute for text wrapping, but there is a simple trick you can use. Add one word at a

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 would need a function that creates a path that is at a given distance from some center point, starts at some angle and ends at some other angle. genkilabs That answer is ok, but cant be animated. I ripped the important stuff out of polar-clock for you. Here is a red arc that animates growing. enjoy. // Custom Arc Attribute, position x&y, value

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. This makes it inconvenient to make a generic resize or drag procedure. Is it a good idea to have each path or circle be drawn inside its own svg object to give me a box to play with? How is draggable/resizable typically implemented in SVG? Peter Ajtai Note: For both drag and resize, you'll have to make separate cases for certain different types of

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 composite single object. Here is the code for creating the objects: window.onload = function () { var dragger = function () { this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); this.animate({"fill-opacity": .2}, 500); }, move = function (dx, dy) { var att = this.type == "rect"