SVG Positioning

Everything in the g element is positioned relative to the current transform matrix. To move the content, just put the transformation in the g element: <g transform=”translate(20,2.5) rotate(10)”> <rect x=”0″ y=”0″ width=”60″ height=”10″/> </g> Links: Example from the SVG 1.1 spec

How to place multiple evenly-spaced arrowheads along an SVG line?

Based on a clarification of the question, here’s an implementation of creating intermediary points along a <polyline> element such that the marker-mid=”url(#arrowhead)” attribute will work. See below that for an introduction to markers and arrowheads. Demo: midMarkers(document.querySelector(‘polyline’),6); // Given a polygon/polyline, create intermediary points along the // “straightaways” spaced no closer than `spacing` distance … 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 shadow cut off

You need to increase the size of the filter region. <filter id=”SVGID_0″ y=”-40%” height=”180%”> works just fine. The silent defaults for the filter region are: x=”-10%” y=”-10%” width=”120%” height=”120%” – large blurs usually get clipped. (Your shadow isn’t getting clipped horizontally because your width is about 2.5x your height – so that 10% results in … Read more

vertical alignment of text element in SVG

According to SVG spec, alignment-baseline only applies to <tspan>, <textPath>, <tref> and <altGlyph>. My understanding is that it is used to offset those from the <text> object above them. I think what you are looking for is dominant-baseline. Possible values of dominant-baseline are: auto | use-script | no-change | reset-size | ideographic | alphabetic | … Read more

Scale and mirror SVG object

To apply both scale and flip, just list both in your transform: transform=”scale(2,2) scale(-1,1)” Or simply combine the values: transform=”scale(-2,2)” Of course, the issue you have with negative scales is that the objects get flipped across the origin (top left) of the SVG, so they can go off the edge of the document. You need … Read more

How to convert/save d3.js graph to pdf/jpeg

To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as (code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested) // the canvg call that takes the svg xml and converts it to a canvas canvg(‘canvas’, $(“#my-svg”).html()); // the canvas … Read more

Default background color of SVG root element

SVG 1.2 Tiny has viewport-fill I’m not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW. A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill=”red” as the first child of the … Read more

Find svg viewbox that trim whitespace around

You can simply set your svg’s viewBox to its Bounding Box. function setViewbox(svg) { var bB = svg.getBBox(); svg.setAttribute(‘viewBox’, bB.x + ‘,’ + bB.y + ‘,’ + bB.width + ‘,’ + bB.height); } document.querySelector(‘button’).addEventListener(‘click’, function() { setViewbox(document.querySelector(‘svg’)); }); svg { border: 1px solid } <svg version=”1.1″ id=”svg” xmlns=”” xmlns:xlink=”” x=”0px” y=”0px” viewBox=”0 0 500 300″ … Read more