使用 SVG 渐变解决曲线编程挑战

在编程世界中，看似简单的任务可能会分解为复杂的挑战。最近，我们在尝试将 Figma 设计转换为代码时遇到了这样的挑战。手头的任务涉及创建一个具有线性渐变的径向表盘——这个看似简单的要求很快被证明比预期的更加复杂。

在这篇文章中，我们将深入研究 SVG 渐变的世界，探索我们为应对出现的挑战而设计的解决方案，并探讨为什么有时接受像这样的复杂工程挑战可能会带来很高的回报。

扔出一个弧线球

起初，这看起来很简单。必须有一个库可以用来创建表盘并对其应用线性渐变。它能有多难？

在快速搜索了High Charts和FusionCharts等研究库后，我们确实找到了能够创建径向刻度盘以及使用 SVG 生成线性渐变的库。然而，当试图将这两个元素无缝结合时，真正的复杂性就出现了。障碍在于 SVG 中定义的线性渐变的本质。默认情况下，线性渐变沿直线在颜色之间过渡。当应用于圆形路径的笔划时，渐变的方向保持线性，而忽略圆的曲线。

因此，如果我们要将线性渐变应用于用单条曲线创建的完整圆形表盘，则渐变将遵循直线路径，而不是沿着表盘的所需径向路径。这无法实现我们正在寻找的弯曲渐变 - 所以它又回到了绘图板。

分解问题

相反，为了实现围绕径向表盘的平滑过渡渐变效果，我们意识到需要将表盘分成多个部分，并对每个部分应用不同的渐变。

在我们的示例中，我们将表盘分为四个部分；每个都分配了自己的线性渐变。通过精心选择渐变停止的颜色，我们能够在表盘周围创建连续的渐变外观。

在这里，我们开始了解如何在 SVG 中构建径向表盘。 “d”属性定义要绘制的路径。在本例中，它指定了径向表盘的第一个四分之一的路径。

“M”代表“移动到”，并将路径的初始点设置在坐标 (150,10) 处。 “a”命令创建椭圆弧。该 arc 命令有几个参数。前两个参数“120 120”设置用于绘制圆弧的椭圆的 x 和 y 半径。 “0 0 1”定义 x 轴旋转（为零）、大弧标志和扫描标志。最后的“103.9230 60”设置路径的终点，从而完成我们的弧线。然后我们在路径上应用带有描边属性的渐变。

对表盘的每个四分之一重复此过程。每个季度都有自己的路径和梯度。这产生了围绕表盘旋转的单一、平滑过渡的渐变效果。

动态梯度填充

为了沿着表盘动态填充渐变，我们利用了 SVG 路径的 stroke-dashoffset 和 stroke-dasharray 属性。创建径向表盘时通常采用这种技术。 CSS 技巧对此方法有一篇深入的文章： SVG 线条动画作品。

通过将描边虚线数组设置为等于路径的长度，我们建立了一种虚线和间隙的图案，类似于环绕圆圈的虚线。 stroke-dashoffset 属性确定了虚线图案的起点，有效地动画化了笔画的移动。通过将笔划破折号从路径起点设置为路径长度的动画，破折号看起来会绕着圆“行进”。

拥抱复杂性（有时）

虽然复杂的设计可能会转化为困难的技术挑战，但它们也为程序员提供了磨练解决问题技能的机会。这是让编程变得有趣的一个组成部分，至少对我来说是这样。

我们在编程中面临的复杂性通常反映了我们正在工作的设计的复杂性。我们的 Figma 设计采用带有线性渐变的放射状表盘，是一个很好的例子，说明了视觉上吸引人的设计元素如何带来重大的技术挑战。

作为程序员，很容易本能地尝试与设计师合作，在设计规范方面达成妥协。事实上，这通常是正确的方法。但有时，如果您希望自己的设计脱颖而出，您需要突破自己的舒适区，想出创造性的方法来解决问题。

另一种说法是，虽然设计复杂性可以转化为技术挑战，但它们也为程序员提供了磨练他们最有价值的技能，即解决问题的能力的机会。

也发布在这里。