svg - SVG 中跨路径的渐变

Question

我在 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.imgur.com/nVnxcRg.png)

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

• 第一个是从内曲线到弯管中心(曲线)。
• 第二个是中心区域。
• 第三个从中心区域到 pipe 的外部曲线。

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

下图说明了想要的结果: https://i.imgur.com/oPEFAZT.png在这种情况下，我添加的矩形说明了我想沿整条曲线使用的渐变。

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

我还发现 Can I apply a gradient along an SVG path? 在管中创建了一个从左到右的渐变(可以这么说)，我希望它是从上到下的。

你们有什么解决办法吗？

Answer 1

您可以使用filters 得到您想要的结果。模糊或照明。这是一篇关于高级过滤器的好文章:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 150 150" >
    <defs>
        <filter id="filter1">
            <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurOut" />
            <!-- We cut off the parts that overlap the source graphic… -->
            <feComposite operator="in" in="blurOut" in2="SourceAlpha" result="COMPOSITE"/>
            <!-- … and then merge source graphic and lighting effect: -->
            <feMerge>
                <feMergeNode in="SourceGraphic" />
                <feMergeNode in="COMPOSITE"/>
            </feMerge>
        </filter>

        <!-- https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/ -->
        <filter id="filter2">
            <!--We create a heightmap by blurring the source: -->
            <feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>
            <!-- We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 200px: -->
            <feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR">
                <fePointLight x="40" y="40" z="2000" />
            </feSpecularLighting>
            <!-- We cut off the parts that overlap the source graphic… -->
            <feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>
            <!-- … and then merge source graphic and lighting effect: -->
            <feMerge>
                <feMergeNode in="SourceGraphic" />
                <feMergeNode in="COMPOSITE"/>
            </feMerge>
        </filter>
    </defs>

    <path stroke="white" stroke-width="20" fill="none" filter="url(#filter1)" 
          d="M-90,50 h150 a20,20 0 0,0 20,-20 v-150" />

    <path stroke="black" stroke-width="20" fill="none" filter="url(#filter2)" 
          d="M-40,100 h150 a20,20 0 0,0 20,-20 v-150" />
</svg>