raphael

Convert SVG polygon to path

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-11-27 04:14:58
问题 I have a fairly large SVG file of administrative subdivisions that I need to work with in Raphael.JS (it has 600 polygons and weights 1.2 Mb). Now, I need to convert these polygons to paths so that it works in Raphael. The great poly2path tool does that, but it doesn't support any batch command, so that each polygon's position relative to the others is lost. Do you know of any tool to convert SVG polygons to paths? (I also have the AI file which was used to export the SVG). Many thanks 回答1:

Move active element loses mouseout event in internet explorer

由 Deadly 提交于 2019-11-27 03:17:01
问题 In a library I am using I have the task of moving an element to the front of the dom when it is hovered over. (I make it bigger so I need to see it, then shrink it back when mouse out). The library I am using has neat solution which uses appendChildren on the active element to move it to the end its parent so further towards the end of the dom and in turn on top. The problem is I believe that because the element you are moving is the one you are hovering over the mouseout event is lost. Your

How to write a web-based music visualizer?

由 折月煮酒 提交于 2019-11-27 01:48:09
I'm trying to find the best approach to build a music visualizer to run in a browser over the web. Unity is an option, but I'll need to build a custom audio import/analysis plugin to get the end user's sound output. Quartz does what I need but only runs on Mac/Safari. WebGL seems not ready. Raphael is mainly 2D, and there's still the issue of getting the user's sound... any ideas? Has anyone done this before? Brian McKenna By WebGL being "not ready", I'm assuming that you're referring to the penetration (it's only supported in WebKit and Firefox at the moment). Other than that, equalisers are

How to achieve 'donut holes' with paths in Raphael

由 给你一囗甜甜゛ 提交于 2019-11-26 22:54:29
问题 I'd like to draw a shape which has holes in it such that I can fill the shape it and not have the holes filled with that colour (leave them transparent). According to the W3 path spec: Compound paths (i.e., a path with multiple subpaths) are possible to allow effects such as "donut holes" in objects. Can somebody please give a very simple example of how to perform this with a vector path in Raphael? Thanks very much. 回答1: This turns out to be quite straightforward if you know the trick. For

How to either determine SVG text box width, or force line breaks after 'x' characters?

由 安稳与你 提交于 2019-11-26 22:36:01
问题 I'm creating an SVG text box using the Raphael library, and filling it with a dynamic string which is extracted from an XML document. Sometimes, this string is longer than the canvas I am placing the text box on, so I need to either limit the width of the box which will itself force the line breaks (I can't find any evidence of this being possible) OR ensure that a '\n' line break is inserted after a certain amount of characters. So (1) is this the best option? And (2) how would I do this?

Attach text on path in Raphaël?

由 无人久伴 提交于 2019-11-26 20:43:54
问题 Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it. 回答1: There are 2 ways to do this. The easier way is to make use of the Raphael .print() method. This can turn text into paths. Each character gets its own path. Then you can iterate over each character and move and

raphael.js - custom attributes

由 对着背影说爱祢 提交于 2019-11-26 20:25:24
问题 Is it possible to define a custom attribute for a raphael element? e.g. r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f', 'my_custom_attribute':'a value'}); Reason I need this is I want to do some quite complex animation on a whole set of elements and I want somewhere to store the original y coordinate for each one. 回答1: Is the custom attribute you want: A simple store for arbitrary data, to be recorded and retrieved? An attribute where a custom action needs to be taken when it is

SVG Gradient turns black when there is a BASE tag in HTML page?

由 时光总嘲笑我的痴心妄想 提交于 2019-11-26 19:51:08
问题 I am using the Raphaël JavaScript Library to create SVG elements in an HTML page and using CodeIgniter as a PHP framework. In the CodeIgniter framework I need to add a <base> tag in the head of the HTML document to use JS,CSS and images, but it caused a strange problem in the SVG element. When I use the <base> tag, gradients do not work. Instead, the object turns black. It behaves exactly the same with image filled path objects. 回答1: SVG Gradients are defined in the document with a unique id

How to do a tooltip on an SVG generated by Raphael

由 心已入冬 提交于 2019-11-26 19:43:59
问题 I'm doing a bit of a pedagogical exercise, converting XML to SVG with XSLT, Javascript and Raphael. I'm sure it's the hard way...but it's educational. The problem I've run into is creating tooltips. So far, I've found three ways to do this: The first way is to use .attr({title: "blah"{) on an object. This works, but it's not supported by Raphael officially, and the content I want to put in the tooltip might be somewhat long, which is a problem when people's OS times out the tooltip before

SVG re-ordering z-index (Raphael optional)

由 笑着哭i 提交于 2019-11-26 18:48:42
How can I reorder Raphael or their underlying SVG elements after creation. Better yet, do something like layers exist in SVG? Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If that is not an option, popping elements to the front would be ok, and pushing it to the back would be better in this particular case. Thanks, Gimme the Code! // move element "on top of" all others within the same grouping el.parentNode.appendChild(el); // move element "underneath" all others within the same grouping el.parentNode.insertBefore(el,el
订阅 raphael