Mike Bostock figured out a way, though it’s not easy: https://bl.ocks.org/mbostock/4163057 Basically, this technique uses getPointAtLength to slice the stroke into many short strokes, specify interpolated color stops for each, and then apply a gradient to each short stroke between those stops. Good luck if you’re up to the challenge 😉 Edit (July 3rd, 2019): … Read more
two hardware vertical pixels per software exposed pixel No that’s wrong. When you specify a coordinate like “81” in an SVG, that coordinate falls on the imaginary line between pixel 80 and 81. If your line has width “1”, then the renderer will attempt to draw that by placing 50% of the colour on the … Read more
…10 years later… CSS now supports conical gradients, although browser support is mixed at the time of writing this. You could apply a <clipPath /> to a <foreignObject /> whose contents use a CSS conical gradient to achieve the desired effect. https://codepen.io/eastonium/pen/abOpdEm
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn’t conflict with existing ones (in other words: you should use namespaces). To use this (equivalent) mechanism: use mydata:id instead of data-myid, like this: … Read more
You must use path element to cut a hole. See the example from the SVG specification: (you can click this link or the following image to view the real svg file) <g fill-rule=”evenodd” fill=”red” stroke=”black” stroke-width=”3″> <path d=”M 250,75 L 323,301 131,161 369,161 177,301 z”/> <path d=”M 600,81 A 107,107 0 0,1 600,295 A 107,107 … Read more
This approach won’t work. SVG doesn’t have conical gradients. To simulate the effect, you would have to fake it with a large number of small line segments. Or some similar technique. Update: Here is an example. I approximate the 360deg of hue with six paths. Each path contains an arc which covers 60deg of the … Read more
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
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: http://jsfiddle.net/Zv57N/ midMarkers(document.querySelector(‘polyline’),6); // Given a polygon/polyline, create intermediary points along the // “straightaways” spaced no closer than `spacing` distance … 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
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