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 + ", " + ...);
}

向ErikDahlström致谢,谢谢Michael Mullany的尝试:)

编辑: 这是演示代码的小提琴.

编辑2: 这是使用弯曲段创建微调器的另一个小提琴.您可以调整分段数和大小,甚至可以看到它旋转.我不知道为什么当尺寸为自动时,SVG的底部边距为5像素,这使得旋转略微偏离中心...