raphael

问题 (using Raphael_2.01, WindowsXP, Firefox8.0.1) Hello, I'm trying to change the letter color of text by referring to "Drawing Text" of http://www.html5rocks.com/en/tutorials/raphael/intro/ . I can display the text "HTML5ROCKS" but I can't change the color. var t = paper.text(50, 10, "HTML5ROCKS"); var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Courier"), 40); // I think "Vegur" is Mac font. So I change it to "Courier". letters[4].attr({fill:"orange"}); for (var i = 5; i <

问题 I have a situation where I am adding multiple papers to my page. I have drawn certain rect and path objects on each. I know how I can give id to each such object, but i haven't seen any example for adding an id to the paper itself. I need to change the objects on click event of a rect within the paper. For this I want to clear the old objects and draw new ones. The problem is that i am reusing the variable for the paper. Hence the variable contains a reference to the most recent paper which

问题 I am trying to covert svg generated with Raphael.js into PNG image. Well, I converted the svg into image when svg has no pattern and image component. Then again when I add these two component into SVG something goes wrong and conversion fails. Complete fiddle is here. Even if I save the generated svg and open in browser without conversion to image the image and patter is not rendered. The code snippet is : var r = Raphael(document.getElementById("cus"), 390, 253); r.setViewBox(-5, -2, 228,

问题 I'm building an app where users can manipulate svg objects (e.g. images) an infinite number of times, namely rotate and scale them. And I use Raphael.js to work with the SVG's. How do I "reset" an object to its initial state before applying new transformation so that the new transformation won't overlap the previous one? Bellow is a test (and here's a working fiddle of it: jsfiddle.net/5TsW6/3/ ) where I've attempted to reset the object in the second viewport before applying the SAME

问题 I've tried using the current top Question on SO : Scaling multiple paths with raphael ...without much luck. I'm building a map of the USA through Raphael and while the map is very nice, I need it to be probably 30% the size it is currently. I was able to change the attr on the initial Raphael canvas to ".5" but that only sized each individual path instead of the whole canvas. I have also tried using javascript to scale the div containing the canvas to no avail. Paths: Actual Page: http:/

问题 I have a visualization generated by d3 (a javascript visualization library similar to Protovis or Raphael, which draws stuff using SVG elements). The vis is interactive, so the user can interact with and edit it. Once the user is satisfied with his/her visualization, I would like the user to be able to export this visualization as a PDF. I've tried several HTML to PDF libraries and they don't work with SVG elements. It is okay if the solution is either client side or server side. I'm using

问题 I would like to use D3.js (or maybe Raphaël) for backend-generated reports using XSL-FO with Java. These JavaScript libraries should be used for several reasons: They render more beautiful charts than what I've seen from Java libraries (IMO) They support both SVG and PNG (from what I know), which is needed in XSL-FO They will also be used in frontend parts of the application. Reusing them also on the backend with Java would reduce developer learning curves and codebase footprint. So using any

问题 I'm trying to set the background-image css property to encoded data URI content as shown in this fiddle It works as expected for all browsers I tested. The only browser that doesn't show the contents is IE 9/10. But I have another example that works in IE 9/10. The difference here is that the data URI contents are initially created in Chrome (by Raphaël) and then used in the example. If the SVG is created in IE (as in the 1st fiddle by Raphaël) itself it's not being displayed if used as

问题 Using Raphael, I wish to be able to drag a shape (an ellipse in the example below) containing a text object, dragging either the shape or the text. I hoped to do this by setting the functions passed to the text element's drag() method to delegate to the associated shape (trying a more polymorphic approach to this other one). However, this results in an error " obj.addEventListener is not a function " when text.drag(...) is called. I'm new to javascript, so I've probably made a really obvious

问题 Can I put a Raphael.js canvas over an IMG element? What should I do make this layout work? 回答1: Simply position the Raphaël canvas over the top of the image element using normal CSS techniques: #wrapper { position: relative; padding: 0; outline: 1px solid #999; } #wrapper img { position: absolute; top: 0; left: 0; } #canvas { position: absolute; top: 0; left: 0; } Then nest your elements like this: <div id="wrapper"> <img src="myimage.jpg"> <div id="canvas"> </div> </div> Here's a full