SVG polar gradients

Question

I am new to SVG, but I would like to learn some methods.

In short, is there an easy way to create something like this?

I thought about creating a polar gradient, and then cropped it:

But how do I create a polar gradient?

Even if there is no method of its own, perhaps it could be done using a simple linear gradient, and then use some transformation of rectangular polarity. Is there any way to do this?

Answer 1

So this is the solution I developed:

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg viewBox="0 0 100 100" version="1.1" onload="makeGradient();"> <script> function makeGradient() { var root = document.rootElement, i = 256, cir, a; for (; i--;) { a = i*Math.PI/128; cir = document.createElementNS("http://www.w3.org/2000/svg", "circle"); cir.setAttribute("cx", 50 - Math.sin(a)*45); cir.setAttribute("cy", 50 - Math.cos(a)*45); cir.setAttribute("r", "5"); cir.setAttribute("fill", "rgb(" + i + ", " + i + ", " + i + ")"); root.appendChild(cir); } } </script> </svg> 

Mini version (395 bytes):

 <?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" version="1.1" onload="g(this.namespaceURI,document,Math)"><script>function g(n,d,m,i,c,a,p,z){for(i=256;i--;){a=i*m.PI/128;c=d.createElementNS(n,"circle");for(p in z={cx:10-m.sin(a)*9,cy:10-m.cos(a)*9,r:1,fill:"rgb("+[i,i,i]+")"})c.setAttribute(p,z[p]);d.rootElement.appendChild(c)}}</script></svg> 

This was done by creating circles filled with 256 shades of gray (it sounds like porn literature for coders!) And fits comfortably.

Radii can be customized: I chose 45 for the entire counter and 5 for single circles. Moreover, the part can be adjusted if 256 is too much:

 for (; i -= 2;) { ... 

Use values ​​of 2 for optimal results. Or just determine the number of steps:

 var steps = 100, i = steps; for (; i--;) { a = i*2*Math.PI/steps; ... cir.setAttribute("fill", "rgb(" + i*255/steps + ", " + ...); } 

Thanks so much for Eric Dalstrom for the tip, and thanks to Michael Mullani for trying :)

Edit: Here is a fiddle to demonstrate the code.

Edit 2: Here is another fiddle using curved segments to create a counter. You can adjust the number of segments and size, and even see how it rotates. I don’t know why, when the size of the car, there is a bottom edge of 5 pixels on the SVG, which makes the rotation a bit off-center ...

Answer 2

SVG version 1.1 lacks lasers that allow this directly, but you can, for example, do this using a bit of script. Here is an article that explains how.

Answer 3

SVG 1.1 does not support polar gradients (which is available in most modern browsers), although there are suggestions that allow you to use such features in SVG 2. The only workaround I can come up with is to use a blend filter using an external generated image as your source with multiple sources. But then I assume that he is trying to avoid external images, so this will be a little pointless :)