raphael

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: I have a problem with setViewBox on raphael, The paper isn't resized even if I did myPaper.setViewBox(0, 0, new_map_width, new_map_height,true); (Line 9 on the JS code) Nb : new_map_width = 400 and new_map_height=300 and the map is at 800*600 this is my code : http://jsfiddle.net/xperali/zdbzJ/ 回答1: I found the solution, I have to execute my setViewBox method after drawing all the paths, and use some math skills :) var original_width = 777; var original_height = 667; var zoom_width = map_width/original_width; var zoom_height = map_height

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Possible Duplicate: Convert SVG to image (JPEG, PNG, etc.) in the browser I have a small project where users construct a diagram using Raphael and then export the composed diagram to an image to save. Problem is it has to run offline. http://www.nihilogic.dk/labs/canvas2image/ will not work as it requires a canvas, not the Raphael generated SVG. Is there a way (javascript) that I can export an image from the SVG? 回答1: Yes, that duplicate question was a big help. canvg combined with canvas2image sorted me out. So I created the SVG

Is there a way to save the SVG generated by raphael as an svg file. Note it only need to work in chrome. Neema As stef commented , the BlobBuilder API is deprecated. Instead, use the Blob API . Building on Andreas' answer , here is how I quickly got it to work: svgString = r.toSVG(); a = document.createElement('a'); a.download = 'mySvg.svg'; a.type = 'image/svg+xml'; blob = new Blob([svgString], {"type": "image/svg+xml"}); a.href = (window.URL || webkitURL).createObjectURL(blob); a.click(); I came up with a solution using Raphael.Export , which gives me an valid svg/xml String (something that

I want to this this Fill SVG element with with a background-image with an offset , but using Raphael JS. Displaying an rectangle with a background image without the offset is easy. canvas.rect( positionx, positiony, width, height ).attr( {fill: "url('/content/image_set.gif')"} ); The code above will display only the upper-left corner of the image. I want to shift it and display another part of it. How can I do it? I'd suggest drawing the image separately from the rect. If you need the stroke you can either draw a filled rect behind the image or draw the rect on top with stroke and no fill. The

Is there a good tutorial for Graphael (special line charts), I currently trying to implement such a graph with grafael http://www.highcharts.com/demo/?example=line-time-series&theme=default unfortunately there is no documentation. Smerity A useful resource has been Kenny Shen's GitHub repository where he has begun writing up both documentation and examples for gRaphael. https://github.com/qoelet/g.raphael As an example check out the line chart documentation here The best example of a Raphael linechart must be this one: http://g.raphaeljs.com/linechart.html , from the source code you can get a

paper=Raphael('previewBody',480,480); paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z') .attr('fill','url(bg.png)')) .scale(.5,.5,0,0); My problem is the fill is not scaled with the svg canvas, so proportionally, it ends up as twice the size it was before the scale of the path. Is there any easy way to scale the fill pattern along with the rest of the svg? It is note possible to do it by using only the functions of the raphael library. When you apply the scale function on a raphael's object, it creates a new svg node, with the coordinates scaled, but unfortunately, it doesn't

I'm a bit new to canvas and such so forgive if it's a trivial question. I'd like to be able to animate an object following a path (defined as bezier path) but I'm not sure how to do it. I've looked at Raphael but I can't work out how to follow the path over time. Cake JS looked promising in the demo, but I'm really struggling the documentation, or lack thereof in this case. Has anyone got some working example of this? Phrogz Use the code on my website from this related question , but instead of changing the .style.left and such in the callback, erase and re-draw your canvas with the item at

I'm fascinated by both d3 and Raphael. I understand that Raphael is built on top of D3 and that it is cross-browser compatible, but I'm not sure which one is better suited for what scenarios. Can somebody please shed some light? My immediate use-case is potentially using the SIMILE timeline and integrating it with a state diagram (for which I intend to use d3/Raphael). Thanks! Raphael is not built on D3. Raphael will help you draw elements. D3 is more comprehensive and will help you bind data to elements. So I'd say D3 is more powerful. This forum discussion Discusses presenting a SIMILE

Goal: User types name into user input field, selects Animate button, and name is printed vertically with each letter containing a drop shadow of each letter. The Javascript library Raphael may be desirable. Problem: So far what I have is the name being printed vertically twice side by side. Obviously the second column should be the letters as drop shadows, but I don't know how to change the style of them to look like shadows. My manager gave me one hint: "I had to create a 2nd text line placed underneath the text...and I used the .blur() method on it. If I have to give you another hint I'll be