小编Dan*_*swa的帖子

我在 SVG 中有一条非常简单的路径。

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 61 57" 
    version="1.1" x="0px" y="0px">
    <defs>
        <style type="text/css"><![CDATA[
            ]]>
        </style>
    </defs>
    <path id="pipe" d="
        M8.0178,52.0035
        L27.0178,52.0035
        C42.4568,52.0035 55.0178,39.4425 55.0178,24.0035
        L55.0178,8.0035
        L43.0178,8.0035
        L43.0178,24.0035
        C43.0178,32.8255 35.8398,40.0035 27.0178,40.0035
        L8.0178,40.0035
        L8.0178,52.0035
        Z">
    </path>
</svg>

（预览： https: //i.stack.imgur.com/FfBRg.png）

我想要实现的是我有 3 个独立的渐变或填充空间：

• 第一个是从内曲线到弯管（曲线）的中心。
• 第二个区域是中心区域。
• 从管的中心区域到外曲线的第三个。

或者，我也可以使用具有多个停止颜色的单个渐变。

下图说明了想要的结果： https://i.stack.imgur.com/I4CNa.png 在本例中，我添加的矩形说明了我想要沿整个曲线使用的渐变。

我对 SVG 中的高级渐变进行了一些研究，但我无法理解如何应用它们或者是否有必要。我了解如何将径向和线性渐变应用于矩形甚至曲线，但这没有提供预期的结果。

我还发现可以沿 SVG 路径应用渐变吗？这会在管子中从左到右（这么说）创建一个渐变，我希望它从上到下。

你们有什么想法如何解决这个问题吗？