2020 answer CSS Filter works on all current browsers To change any SVGs color Add the SVG image using an <img> tag. <img src=”dotted-arrow.svg” class=”filter-green”/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for … Read more
To get this to work, you need to understand how objectBoundingBox units work in SVG, and also how preserveAspectRatio works. Object Bounding Box Units The size and content of gradients, patterns and a number of other SVG features can be specified in terms of the size of the object (path, rect, circle) which is being … Read more
This is a complete example which combines hints by other people here. It should render a file called test.svg from the current directory. It was tested on Ubuntu 10.10, python-cairo 1.8.8, python-pygame 1.9.1, python-rsvg 2.30.0. #!/usr/bin/python import array import math import cairo import pygame import rsvg WIDTH = 512 HEIGHT = 512 data = array.array(‘c’, … Read more
I have created a working example of what I believe you are describing on my site here: http://phrogz.net/svg/drag_under_transformation.xhtml In general, you convert the mouse cursor into the local space of an object by: Creating a mousemove event handler: var svg = document.getElementsByTagName(‘svg’)[0]; document.documentElement.addEventListener(‘mousemove’,function(evt){ … },false); In that event handler, convert the mouse coordinates (in pixels) … Read more
Maybe someone is searching for an answer, like me for two days now: // Draw a path and hide it: var root = paper.path(‘M0 50L30 50Q100 100 50 50’).hide(); var length = root.getTotalLength(); // Setup your animation (in my case jQuery): element.animate({ ‘to’: 1 }, { duration: 500, step: function(pos, fx) { var offset = … Read more
If you peruse the release notes, you’ll see a full explanation of everything that’s changed between the final release of 2.x (2.10.3) and the most recent release, 3.2.7. In particular, from release 3.2.2: Better handling of drag gestures in d3.behavior.drag, d3.behavior.zoom and d3.svg.brush by not preventing default behaviors or stopping propagation. For example, mousedown now … Read more
Here’s an article that covers what you need: http://dev.opera.com/articles/view/advanced-svg-animation-techniques/ Edit: link is removed. Archived copies: https://github.com/operasoftware/devopera-static-backup/blob/master/http/dev.opera.com/articles/view/advanced-svg-animation-techniques/index.html http://web.archive.org/web/20140228202850/http://dev.opera.com/articles/view/advanced-svg-animation-techniques In short: Create the <animation> with begin=”indefinite” so that it won’t treat the animation as starting on document load. You can do this either via JavaScript or raw SVG source. Call beginElement() on the SVGAnimationElement instance (the <animate> … Read more
I can solve that problem – with trigonometry :). See fiddle: http://jsfiddle.net/nrabinowitz/GQDUS/ Basically, calling arc.centroid(d) returns an [x,y] array. You can use the Pythagorean Theorem to calculate the hypotenuse, which is the length of the line from the center of the pie to the arc centroid. Then you can use the calculations x/h * desiredLabelRadius … Read more
Expanding on @robert-longson’s answer, you can use SVG’s elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here’s one possible implementation: // Returns path data for a rectangle with rounded right corners. // The top-left corner is ⟨x,y⟩. function rightRoundedRect(x, y, width, … Read more
The D3 gallery has a lot of good examples, but a lot of the examples loads their data from a tab-separated values file. This is a nice way to separate data and visualization in short examples, but it can be a bit confusing if you are new to D3 and JavaScript, since it requires some … Read more