Svg 极梯度

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

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

我在考虑创建一个极性渐变，然后剪裁它：

但是如何生成极梯度呢

---

即使没有本地的方法，也可以使用简单的线性梯度，然后使用一些直角极坐标变换。有办法做到这一点吗？

SVG 1.1中不支持极性渐变（目前大多数边缘浏览器都支持极性渐变），尽管有人建议在SVG 2中支持类似的功能。我能想到的唯一解决办法是使用外部生成的图像作为乘法源应用混合过滤器。但是，我假设整个过程都是为了避免外部图像，所以这有点毫无意义：）

SVG 1.1中没有允许直接进行此操作的paintservers，但是您可以使用一些脚本来实现。这就解释了为什么。

这就是我开发的解决方案：

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

使用2的幂可获得最佳结果。或者只定义步骤的数量：

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

对埃里克·达尔斯特伦的暗示表示衷心的感谢，并感谢迈克尔·穆拉尼的尝试：）

编辑：以演示代码

---

编辑2:使用曲线段创建微调器。您可以调整分段的数量和大小，甚至可以看到它旋转。我不知道为什么当大小为自动时，SVG上有一个5像素的底边，这使得旋转稍微偏离中心…

你得到了要点，男士：）这是一个旋转器，所以让浏览器不发出请求将是很好的，因为后续AJAX请求不会出现服务问题。使用数据URI将是下一个解决方案，但我认为SVG将是完美的，因为，你知道，向量和所有……有趣的文章，绝对值得一读。使用一些动态生成的形状是我想到的另一个解决方案，但我想知道它的性能。我要做一些测试。我已经创建了一个答案，您可能想检查一下。如果您只是创建图像，那么您可能会发现使用canvas可以获得更好的性能。@RobertLongson说实话，我还没有检查性能。你能推荐一些这样做的工具吗？我不确定jsperf是否适合这一点。。。

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

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