8

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

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

一个普通的微调器

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

极地梯度

但是如何生成极坐标梯度？

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

4

3 回答 3

12

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

<?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 的尝试 :)

编辑： 这是一个演示代码的小提琴。

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

于 2013-06-20T14:21:27.543 回答
2

SVG 1.1 中没有直接允许这样做的绘图服务器，但您可以使用一些脚本来实现。这是一篇解释如何的文章。

于 2013-06-18T06:56:37.717 回答
1

SVG 1.1 中不支持极坐标渐变（当今大多数边缘浏览器都可用），尽管有人提议在 SVG 2 中允许此类功能。我能想到的唯一解决方法是使用外部生成的图像应用混合过滤器作为您的乘法来源。但是，我假设它试图避免外部图像，所以这有点毫无意义:)

于 2013-06-18T05:48:41.950 回答