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.stack.imgur.com/FfBRg.png）

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

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

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

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

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

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

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

Answer 1

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

\n\n

\r\n

\r\n

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 150 150" >\r\n    <defs>\r\n        <filter id="filter1">\r\n            <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurOut" />\r\n            <!-- We cut off the parts that overlap the source graphic\xe2\x80\xa6 -->\r\n            <feComposite operator="in" in="blurOut" in2="SourceAlpha" result="COMPOSITE"/>\r\n            <!-- \xe2\x80\xa6 and then merge source graphic and lighting effect: -->\r\n            <feMerge>\r\n                <feMergeNode in="SourceGraphic" />\r\n                <feMergeNode in="COMPOSITE"/>\r\n            </feMerge>\r\n        </filter>\r\n\r\n        <!-- https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/ -->\r\n        <filter id="filter2">\r\n            <!--We create a heightmap by blurring the source: -->\r\n            <feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>\r\n            <!-- We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 200px: -->\r\n            <feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR">\r\n                <fePointLight x="40" y="40" z="2000" />\r\n            </feSpecularLighting>\r\n            <!-- We cut off the parts that overlap the source graphic\xe2\x80\xa6 -->\r\n            <feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>\r\n            <!-- \xe2\x80\xa6 and then merge source graphic and lighting effect: -->\r\n            <feMerge>\r\n                <feMergeNode in="SourceGraphic" />\r\n                <feMergeNode in="COMPOSITE"/>\r\n            </feMerge>\r\n        </filter>\r\n    </defs>\r\n\r\n    <path stroke="white" stroke-width="20" fill="none" filter="url(#filter1)" \r\n          d="M-90,50 h150 a20,20 0 0,0 20,-20 v-150" />\r\n\r\n    <path stroke="black" stroke-width="20" fill="none" filter="url(#filter2)" \r\n          d="M-40,100 h150 a20,20 0 0,0 20,-20 v-150" />\r\n</svg>

\r\n

\r\n

\r\n

\n