raphael

问题 I am trying to draw a line along with mouse move on a paper. I just know how to draw a line using path . But wanted to know if anyone have ideas to make drawing a line along with mousemove . Please help me on this. 回答1: Here a link to such example using raphael Drawing with Raphael.(Credit:Jonas). (click view->source to see how its done...) And a jsfiddle that I did just in case( just for back up ) It uses the drag and mousemove events of raphael over a rectangle element... 来源： https:/

问题 I read in the documentation raphaeljs description of Set.forEach, and can't understand how it works. Please can anyone give me an example of usage. 回答1: Here you have a working example: http://jsfiddle.net/9X6rM/ And this is the important part of It: set.forEach(function(e){ e.attr({fill:'#000'}) }) Its a little bit tricky at first, but its pretty handy when you get it. You need to pass to the forEach() method the function that you want to execute on each element, and this function need to

问题 I read in the documentation raphaeljs description of Set.forEach, and can't understand how it works. Please can anyone give me an example of usage. 回答1: Here you have a working example: http://jsfiddle.net/9X6rM/ And this is the important part of It: set.forEach(function(e){ e.attr({fill:'#000'}) }) Its a little bit tricky at first, but its pretty handy when you get it. You need to pass to the forEach() method the function that you want to execute on each element, and this function need to

问题 I got a problem with circled text related to SVG. My goal is to create path that will allow me to write on it but also center the text, still keeping track with my path - from the top part of the circle. Example That's what it looks like (image inside) Problem Currently I'm using textPath + path combination to generate path and write on it. <svg> <defs> <path id="textPath" d="M 200 175 A 25 25 0 0 0 182.322 217.678" /> </defs> <text x="25" y="0"><textPath xlink:href="#textPath" startOffset="0

问题 Is it real to make line with 1px weight in SVG or raphaeljs? The follow code var p = Paper.path("M1 1 L50 1"); p.attr("stroke", "#D7D7D7"); p.attr("stroke-width", "1"); p.attr("opacity", 0.5); draw line which looks like 2px or 3px. Any alternative? 回答1: When SVG lines lie at their apparently correct coordinates they actually lie inbetween pixels, so when you state M1 1 L50 1 it paints half a pixel on the top and the other half in the bottom of the pixel, making it look like a thick,

问题 I'd like to create a linear transparent gradient to a div. Is there any way to do that with jquery? Or should I use some other library like raphaeljs? I'd like to achieve an effect like the following: 回答1: Why not keep it light and browser compatible. div { backgroud-image: url('images/gradient.png'); background-repeat: repeat-x; background-position: top right; } 回答2: You can do it with CSS3: E.g. div { opacity: 0.5; background: #999; /* for non-css3 browsers */ filter: progid

问题 I am trying to set up a hover for a raphael element so that when the mouse is on the element, it has a glow and when the mouse leaves, the glow is removed. I have figured out how to add the glow, but I am having trouble removing it. Here is what my script looks like: $(document).ready(function() { var paper = Raphael(0,0,360,360); var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); myCircle.hover(function() { myCircle.glow().attr('stroke','#FFF'); }, function() { // removing the

问题 I am creating a diagram application in which I hide and show few elements e.g. var c = paper.circle(10, 10, 10); c.hide() var c2 = paper.circle(10, 10, 10); c2.show() Now I want to act upon such shapes e.g. calculate bounding box etc but I am not able to find how to get if shape is hidden or not? Is there something like this shape.is_visible() or shape.attr('visible') 回答1: I took a look at the documentation and source code and cooked this up (untested): Raphael.el.is_visible = function() {

问题 I have recently implemented some data visualisation using d3.js, I'm now trying to get this to work for Internet Explorer browser versions 7 and above. The common suggestion to get this to work, is to combine d3.js with raphael.js, which is a cross browser graphics library. There already seem to be some implementations of such libraries such as r2d3.js : d34raphael.js : I'm trying to understand if these existing implementation already have d3's capability of data binding and the physics

问题 I managed to draw four different curves with the examples of the Raphael library. Now, I would like to create a single curve with multiple handles in it. How do I add more handles in this example. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Bezier curve</title> <style> #holder { height: 100%; left: 100%; margin: -100% 0 0 -100%; position: absolute; top: 100%; width: 100%; } </style> <script src='jquery.js'></script> <script src=