SVG 极地渐变

Question

我是 SVG 的初学者，但我想学习一些技术。

简而言之，有没有一种简单的方法来创建这样的东西？



我正在考虑创建一个极地渐变，然后剪辑它:



但是如何生成极地渐变？

即使没有本地方法，也可以使用简单的线性渐变，然后使用一些直角坐标变换来制作。有没有办法这样做？

Answer 1

所以这是我开发的解决方案:

<?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>

缩小版(395 字节):

<?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>

这是创建了一个充满 256 种灰色阴影的圆圈(这听起来像程序员的色情文学!)并且很方便地放置。

半径可以调整:我为整个微调器选择了 45，为单个圆圈选择了 5。此外，如果256太多，细节也可以调整:

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

使用 2 的幂以获得最佳结果。或者只是定义步骤数:

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

非常感谢 Erik Dahlström 的提示，感谢 Michael Mullany 的尝试:)

编辑: Here's a fiddle来演示代码。

编辑 2: Here's another fiddle使用弯曲段来创建微调器。您可以调整段数和大小，甚至可以看到它在旋转。我不知道为什么当大小为自动时，SVG 上的底部边距为 5 个像素，这使得旋转稍微偏离中心...