How can I change the color of an ‘svg’ element?

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

Crop to fit an svg pattern

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

SVG rendering in a PyGame application. Prior to Pygame 2.0, Pygame did not support SVG. Then how did you load it?

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

SVG coordinates with transform matrix

I have created a working example of what I believe you are describing on my site here: 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

Why does d3.js v3 break my force graph when implementing zooming when v2 doesn’t?

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

SVG trigger animation with event

Here’s an article that covers what you need: Edit: link is removed. Archived copies: 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

svg / d3.js rounded corners on one side of a rectangle

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