raphael

问题 I have these 4 rectangles and each rectangle has some amount of rotation transformation applied to it. I put all these rectangles in a set and then applied transformation on it. Doing so the rotation transformation on the individual rectangles was lost. I do not want that to happen. How can I work around this? JS Fiddle Code window.onload = function(){ var paper = Raphael(0,0,500,500); var rect01 = paper.set(); paper.setStart(); var a = paper.rect(10,10,50,10).transform("r10"); var b = paper

问题 Using the example from "How to achieve donut holes with paths in raphael" ( How to achieve 'donut holes' with paths in Raphael ) I was able to tweek the code a bit more to my use-case. My next goal with this is to enlarge one of the sectors on mouse over, without pulling it away from the inside circle. Is this possible? Here's the current code: http://jsfiddle.net/Swivelgames/efb9n/1/ I'm hoping to make it look like this: 回答1: Evening, I've sort of cheated here. The way the donut is working

问题 Okay then we have a basic situation, that is drawing a circle and filling it with an image. This can be easily done by using: el.attr({'fill': 'url(image_url)'}); but the above has a disadvantage of not scaling the image to fit in the circle. So essentially I'm looking for something like this (CSS based): http://jsfiddle.net/hKyzT/ any hints? Any help appreciated! Regards 回答1: Here's a modified version of Raphaël that does that: http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image

问题 I'm creating an "amazing" effect to show a product (that brilliant 'absolutedy need it' from the customer!). I've already realized the effect http://jsfiddle.net/EMpQd/9/ (it's easier to see than to explain). My problem is: setting a rectangle in the background, and then a circle on top of it, I need to get transparency not only in the circle, but also in the rectangle, in the section covered by the circle (aka the intersection). How I can achieve this? Is this possible with Raphael? code for

问题 I use Raphael JS to create an SVG-map with area's and textlabels. I want the area to highlight when you move the mouse over it. I have this working now, but when I move the mouse over the label (in the center of the area) the mouseout-event for that area is triggered, so the area is unhighlighted again. Is there any way to prevent this from happening, or a workaround ? 回答1: Create a rect with opacity set to 0 over the text and attach the event handlers on that rect. You can calculate the

问题 I'm pretty new at SVG and Raphael, but I've been using Illustrator for many years, so I have some assumptions on how it works. I want to combine two paths which should return a single element. I need to make a speech bubble, but it could be anything really. In this case I tried to make two rect , one with round corners and another square rect which was rotated. It looked alright, but when I tried to move the speech bubble, the rotated element moved in the wrong direction, because of the 45

问题 I am wondering if anyone has heard of some javascript which can take a simple SVG path that took maybe 30 seconds to create in illustrator or something and convert it into something that looks 3d. There is an extrude function in illustrator which does this. It is also called polling in sketchUp. I am using Raphael.js now, but am open to other suggestions. A simple solution would be to make a copy of the path and move it a couple pixels down and to the right and give it a darker color behind

问题 Right now I'm using: r.forEach( function (el) { el.scale(0.5, 0.5, 0.0, 0.0); }); to scale each object around (0/0), which is working fine. The Raphael reference however states that the scale function is deprecated and I'm supposed to use Raphael.transform(...) instead. I tried: r.forEach( function (el) { el.transform("S(0.5)"); }); however, this will scale the paths using the image center as the center of scale. How can I achieve the same effect with the transform function? 回答1: You can use

问题 I'm trying to make a triangle that has rounded corners. The triangle will look like this: The bottom left corner is the only one that seems fairly easy to make, mostly because that is a 90 degree 'turn'. That turn is made using the Q command in SVG with the following parameters: Q x,y + height, x, y + height - RADIUS starting at the right bit of the arc I'm creating. However, the other corners are variable, depending on the triangle size. I can calculate their angles using atan() functions,

问题 Anyone know of function that can break text at word boundaries to fit into rectangle Following is code for rectangle and text window.onload = function () { var outsideRectX1=30, outsideRectY1=30,outsideRectX2=220, outsideRectY2=480, outsideRectR=10; var group = paper.set(); var rect1=paper.rect(outsideRectX1+40, outsideRectY1+70, 80, 40,10); var text3=paper.text(outsideRectX1+75, outsideRectY1+85,"Test code for wrap text").attr({fill: '#000000', 'font-family':'calibri', 'font-size':'14px'});