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个单独的渐变或填充空间：

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

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

下图说明了想要的结果： 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/

＆＃13;

<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>

＆＃13;

Answer 2

通常，无法创建沿路径流动的渐变。

然而，在像你这样仅涉及直片和圆弧的情况下，你可以通过将形状分解成这些部分来达到效果。然后对每个部分应用不同的渐变。您对直线部分使用import * as utils from '../utils ';，为弯曲部分使用<linearGradient>。

在下面的示例中，我使用了一个非常简化的渐变用于＆＃34;管道＆＃34;影响。您可能希望为自己添加更多停留以提供更好的3D效果。

＆＃13;

<radialGredient>

＆＃13;

SVG中的渐变路径

2 个答案: