svg

Convert SVG polygon to path

by

Open your SVG in a web browser. Run this code: var polys = document.querySelectorAll(‘polygon,polyline’); [].forEach.call(polys,convertPolyToPath); function convertPolyToPath(poly){ var svgNS = poly.ownerSVGElement.namespaceURI; var path = document.createElementNS(svgNS,’path’); var pathdata=”M “+poly.getAttribute(‘points’); if (poly.tagName==’polygon’) pathdata+=’z’; path.setAttribute(‘d’,pathdata); poly.getAttributeNames().forEach(function(name){ if(name !== ‘points’) path.setAttribute(name, poly.getAttribute(name)) }) poly.parentNode.replaceChild(path,poly); } Using the Developer Tools (or Firebug) of the browser, use “Copy as HTML” (or … Read more

Changing an SVG marker’s color – CSS?

by

As Robert wrote, it’s not possible in SVG 1.1: From the SVG 1.1 spec: Properties inherit into the ‘marker’ element from its ancestors; properties do not inherit from the element referencing the ‘marker’ element. SVG2 does allow you to say that you want the style from the referencing element: Properties inherit into the ‘marker’ element … Read more

Gaussian blur cutoff at edges

by

The filter canvas has default values : x=y=-10% and width=height=120%. You can change them with the x, y, width and height attributes on the filter element. Try to set a bigger canvas : <filter x=”-50%” y=”-50%” width=”200%” height=”200%”/> Yet, since the canvas is bigger, there will be performance loss.

Merging multiple SVG files into one

by

To change the SVG in exactly that way, you should check out my SVG Stacking Tool. As SVGs are XML one can use XSLT to transform the data: SVG Stacking GitHub Repository Update: As pointed out in the comments, there seems to be a bug so that the SVG file is requested multiple times. More … Read more

Why nest an element inside another element?

by

Nesting SVG elements can be useful to group SVG shapes together, and position them as a collection. All shapes nested inside an svg element will be positioned (x, y) relative to the position (x, y) of its enclosing svg element. By moving the x and y coordinates of the enclosing svg element, you move all … Read more

Perplexed by SVG viewBox, width, height, etc

by

For a precis on the viewBox see the (only) figure in this article: https://web.archive.org/web/20140119030353/https://software.intel.com/en-us/html5/blogs/viewbox-a-window-into-the-soul-of-svg, inlined below for convenience: That picture is worth 1000 words of explanation. The width and height parameters, aka the viewport in W3C terminology are a different thing. But you’re not changing those in the above example. There is a slightly complex … Read more

How to use D3 selectAll with multiple class names

by

The most D3 way to do this would be to chain the selectors using the filter method: var list1 = d3.selectAll(“.mYc”).filter(“.101″); This won’t work though because class names cannot start with a number. So you have to rename to something like “a101” and then you can do var list1 = d3.selectAll(“.mYc”).filter(“.a101”); See this fiddle.