FAQ Database Discussion Community


Is there any method to find element by snap id in Snap svg?

javascript,raphael,snap.svg
In raphael there is a Paper.getById() method and it works well, but in Snap there is no such method and I can't find any analogue one. I see that Snap sets for every element on the paper the unique id something like this pathSian06waj35 . But I can't find any...

Add click action to countries in raphael JS world map

javascript,html,svg,click,raphael
I'm making a world map in which you click a region (North America, Asia etc. ) using raphaeljs and world.js shapes @David Noël has opensourced a way of combining countries into one element which highlights when you rollover, which I have done succesfully. I'm usually OK with Javascript but I...

How can I animate the fill of a path with Raphaël.js?

javascript,raphael,hoverintent
I am trying to use the hoverIntent.js with Raphaël.js at This Demo to handle the handlerIn function not immediately and waits until the user's mouse slows down enough before making the call of any function( like Hover) but I am getting this error: Uncaught TypeError: Failed to execute 'animate' on...

SVG and Responsive issue

javascript,css,svg,responsive-design,raphael
i have an issue with this home page -> http://novustest.altervista.org/ the map is displaying correctly on big screens but i want to make it more flexible, i want that the map resize automatically if i reduce my window browser. How can i do that? This is my code, it's very...

Raphael JS sweeping clock

javascript,raphael
Using Raphael JS I want to have a continuing sweeping clock. I have kind of got it implemented but there is a problem. The transform on the animation constantly requries a increasing integer to rotate. Eventually I'm going to hit a max integer. If I use 0,90,180,270. When it hits...

Drawing rects using Raphael,storing coords in database, retrieve the coords re-draw the shapes

javascript,php,json,canvas,raphael
sorry for the long title, but it pretty much puts my problem in a nutshell. I am currently drawing a rectangle using the following : for (var i = 0; i <= fixedrow; i++) { for (var j = 0; j <= fixedcolumn; j++) { var offseti = i; //An...

How can I add my own icon to Raphael's free icon stock?

icons,raphael
I created my wheel using wheelnav.js and it uses raphael.js's intergrated free icon stock. My goal is to integrate there my own icons. What I have done: Created my icon in svg-format Using this tool recieved raphael based code of my icon Tryed to add this code to the end...

How to connect 4 points on a plane so they do not fold on themselves(they always create a Quadrilateral)

geometry,raphael,computational-geometry,geometry-surface
I have created a small Raphael app to showcase my struggle. I created four handles which can be moved. A 'sheet' is covering the entire screen except for the square between the 4 handles. Whenever the handles are dragged the sheet is placed accordingly. What ends up happening is that...

Having Issue on Assigning Functions to JavaScript Object

javascript,jquery,raphael
I have an JS Object like var map = { prov1: { paper.path("M182.89887,371.5666L18,.... }, prov2: { paper.path("M182.89887,371.5666L18,.... }, prov3: { paper.path("M182.89887,371.5666L18,....} }; now I need to assign some function to each of theses properties like $(map.prov1).hover({ alert("You Assigned A Task to prov1"); }); in a working example it should be...

How can I add an open triangle arrow-end to a line?

javascript,raphael
How can I add an open triangle arrow-end to a line in Raphael JS? The closest to it is block-wide-long, but I would like to make an arrow-end empty inside. var path_1 = paper.path('M10 50 L250 50'); path_1.attr({stroke:'#FF0000', 'stroke-width': 6 ,'arrow-end': 'block-wide-long'}); JSFiddle...

Changing text in setInterval in RaphaelJS

javascript,text,raphael
Basically I am brand new to JavaScript, trying to create a digital watch, I have almost got there with it, however the time just writes over itself every second, instead of replacing the previous time, this is the part of my code concerned, could you point out where I have...

What is wrong with this snap svg plugin?

javascript,svg,raphael,snap.svg
I have this code : el.replace(/[0-9]*\.[0-9]*/g, function(x){ return (+x).toFixed(2) }) }; It works great on an individual svg path to trim its decimal places. Now I want to be able to trim all the paths from a paper(svg).To do that I am trying to make a snap svg plugin here:...

How to set Text font in RaphaelJS

javascript,printing,fonts,raphael
I have a small RaphaelJS script which makes use of Text to display text on the screen. This text is dynamic - it is updated frequently. I want to set the font of the text. I have downloaded a Cufon .js font file to my liking, and used the code...

Access Raphael path progrmatically

javascript,jquery,raphael
Hi I am drawing raphael path and assigning an id to them using " eye.node.id". I am trying to get the id problematically to change the color using : `var selectedBodyPart = p.getById(1001); selectedBodyPart.attr('fill', 'blue');` But it does not work. my fiddle is : http://jsfiddle.net/RaoBurugula/okgdtzzh/3/ note : i have added...

raphael js drag rotation in Firefox and Internet Explorer

javascript,rotation,raphael,drag
I am new to the SVG and Raphael world and am trying to create a radial dial that has a draggable needle. The drag works fine in Chrome, Safari, and Opera. In Internet Explorer the movement is very jittery and and will often return to it's initial starting position. In...

Using raphael.js to draw an image with parameters sent through socket.io

javascript,image,socket.io,raphael
This is what I have tried so far. socket-server.js var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var config = require('./config2.js'); app.get('/', function(req, res){ res.sendfile('socket-client.html'); }); io.on("connection", function (socket) { var mapRes = {width : 720, height: 1040}; socket.emit("mapRes", mapRes); }); http.listen(3000, function(){ console.log('listening on *:3000');...

How to create infinite raphael canvas

javascript,canvas,raphael
I created a raphael canvas. There are some draggable circle and rectangle on it. A problem is when I dragged the object to the bottom, the object appeared "half circle" or "half rectangle" and the canvas cannot be extended as the drag movement. How can I create the "infinite" canvas...

How to draw rectangles on SVG on click event?

javascript,svg,raphael
I am using raphael js in my application. Here I need to draw a small rectangle on a point of clicking in raphael paper. I need to connect these rectangle using a line. Can anyone make DEMO of this. I am adding sample DEMO. Please update this. My DEMO.: HERE...

Making clock in javascript but Raphael not defined

raphael
I am making a clock in javascript. The code below is just the start. It should produce an orange rectangle only. I am using the raphael library for the vector graphics. However, when i try and view this in a web browser, in the inspect element i get a message...

issues with Raphaël and removing objects within svg

javascript,jquery,svg,d3.js,raphael
if you open the code pen there is a fire button. it will launch a bunch of ellipses and then when it hits it will cause a burst. if you look the ellipses ,which there are two sets of, they are still there. I have tried using the below d3.selectAll("ellipse").remove()...

How do i pass arguments to a javascript element from scala?

javascript,scala,playframework,raphael,morris.js
I need to feed a javascript element with values from a Map as shown below. My render feeds the HTML document with: @(morrisDonut: Map[String, Integer]) The JS looks like this: $.getScript('https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js',function(){ $.getScript('https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js',function(){ var donutData = []; @for((activity, steps) <- morrisDonut) { donutData.push({label: activity, value: steps}); } Morris.Donut({ element: 'user_activity-donut', data:...

enyo framework to integrate which raphael

javascript,svg,raphael,enyo
I'm trying to integrate Raphael with enyo.js to create SVG component using Raphael instead of through enyo so i can use some of the Raphael functionality. I would like to replace the div that is rendered by default with it child component svg, i have created below jsfiddle. Can anyone...

How to use this js svg parser to change the path's decimal places in an svg file or element to n decimals?

javascript,math,svg,raphael,snap.svg
There is this svg parser that does few svg optimization including changing an svg path's decimal places. if you use snap svg and make a path element : var paper = Snap("100%","100%").attr({"viewbox":"0,0,500,600"}); var pth =...

Raphael - How to handle click on empty area?

raphael
I have some elements like circles & paths on my canvas that created with raphaeljs. i just want handle click when user click on empty area of canvas. i try to set click event on canvas/svg elemnt in raphael but its fire every where and i just want fire when...

D3/Raphael js draws 1000+ animated circle with slow fps

javascript,svg,d3.js,raphael,fps
I wrote script on Raphael JS v2.1 that draws 1000+ circles and many paths. Circles are animated along that paths and then removed. At ~100 circles fps is 40. At 1000+ fps is 1-10. Code example: var r = Raphael("diagram", "100%", "100%"); setInterval(function () { r.moveCircle(lines[Math.floor(Math.random() * 20)]); }, 100);...

Animate raphael objects

javascript,html,path,raphael
I'm quite new to raphael.js and I'm trying to animate raphael elements. For example, I've drawn an arrow using paper.path(). var arrow = paper.path("M10,10L100,100"); arrow.attr({ "stroke-width": 5, "stroke-dasharray": "-.", "arrow-end": "classic-wide-long" }); How do I make the arrow's color seem like flashing when it's drawn?...

Arrow heads on raphael path

javascript,html,raphael,arrow
I'm fairly new to raphael.js and I'm trying to draw an arrow head on raphael path element (or draw and arrow from (x1,y1) to (x2,y2)) This is the raphael path (line) that I draw from (x1,y1) to (x2,y2) on my paper. Assuming that x1,y1,x2 and y2 all have expected values....

Issue on Path Fill Effect by Hover on Associated Link With Raphaël.js

javascript,jquery,raphael
Can you please take a look at this demo and let me know why I am not able to add fill effect on hover on list? <div id="canvas"></div> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> <script> window.onload = function () { var c = Raphael("canvas", 200, 200); var a = c.path("M50 50,...

JS animation writes over itself instead of replacing

javascript,html,animation,raphael
I have this code for a digital clock using Raphaël library which prints over itself instead of replacing itself each time, does anyone know how to edit the code so it replaces instead of writes over? JS file referenced within HTML file: window .onload= function (){ var paper = new...

Set default fill & stroke colors in Raphael.js

svg,raphael
Is it possible to set a default fill and stroke color in Raphael so that I don't have to specify it every time I create a new shape?

Loop animation in Raphaël JS

javascript,jquery,html5,raphael
This is a simple animation in the JavaScript library of Raphaël JS. The function draws a field, then puts out the object of a pink rectangle. When you hit the "gray" button the pink rectangle starts to move horizontally. The pink rectangle moves and once it hits its destined position...

animate 2 points of a shape to follow the mouse on mouse hover

canvas,html5-canvas,raphael
I've got a simple shape in vector and I would like to animate just the 2 top point of the shape to follow horizontally the mouse movement on hover. I would like to post it on my website with html5 canvas. Could someone help me understanding how this can be...

RaphaelJS animation loop

javascript,html,raphael
I need help with adding a loop to my raphaelJS animation. The idea is to hit the button id="1" to rotate the purple square 120degrees. If you hit button id="2", the purple square will rotate 120degrees to the left instead. I've accomplished to add the function which they both rotates,...

Raphael.js has weird behavior on drag

javascript,raphael
I have circle with a line from the center to the edge of the circle. The user can click on and drag the line and get the degrees from wherever they set the line. I'm using the code from the answer here and have adjusted the code accordingly. Everything works...

How to move element front and back?

javascript,raphael
DEMO:HERE I am using raphael js in my application. Here I need to re-arrange element order on paper. I want to move back or front element one place at a time. I tried Using toFront() and toBak(), but it moves to the end or top of paper. I just want...