SVG中路径的渐变 [英] Gradient across path in SVG

问题描述

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

I have a very simple path within a 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个单独的渐变或填充空间:

What I'd like to achive is that I have 3 separate gradients or filling spaces:

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

或者，我也可以使用带有多个停止色的单个渐变.

Alternatively I could also use a single gradient with multiple stop colors.

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

The following image illustrates the wanted result: https://i.imgur.com/oPEFAZT.png In this case the rectangles I added illustrate the gradient that I want to use along the whole curve.

我对SVG中的高级渐变进行了一些研究，但我不知道如何应用它们，甚至是否有必要. 我知道如何对矩形甚至曲线应用径向和线性渐变，但是并没有达到预期的效果.

I did some research regarding advanced gradients in SVG but I was not able to understand how to apply them or if that is even necessary. I understand how to apply radial and linear gradients to rectangles or even to curves but that did not deliver the expected result.

我还发现了可以在SVG上应用渐变吗?路径?会在管中从左到右(可以这么说)创建一个渐变，我希望它从上到下.

I also found Can I apply a gradient along an SVG path? which creates a gradient in the tube from left to right (so to say) and I'd like it from top to bottom.

你们有什么解决办法的想法吗?

Do you guys have any ideas how to solve this?

推荐答案

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

In general it is not possible to create gradients that flow along a path.

但是，在像您这样的情况下，仅涉及直件和圆弧，您可以通过将形状分成这些部分来达到效果.然后，对每个零件应用不同的渐变.直线部分使用<linearGradient>，弯曲部分使用<radialGredient>.

However, in cases like yours which only involve straight pieces and circular arcs, you can achieve the effect by breaking the shape up into those sections. Then you apply a different gradient to each part. You use a <linearGradient> for the straight sections, and a <radialGredient> for the curved sections.

在下面的示例中，我对管道"效果使用了非常简化的渐变.您可能希望添加更多的光阑，以获得更好的3D效果.

In the example below, I have used a very simplified gradient for the "pipe" effect. You will probably wish to add more stops to yours to give a better 3D effect.

<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>
      <linearGradient id="horizontalPipe" x2="0" y2="1">
        <stop offset="0" stop-color="white"/>
        <stop offset="0.25" stop-color="black"/>
        <stop offset="0.75" stop-color="black"/>
        <stop offset="1" stop-color="white"/>
      </linearGradient>
      <linearGradient id="verticalPipe">
        <stop offset="0" stop-color="white"/>
        <stop offset="0.25" stop-color="black"/>
        <stop offset="0.75" stop-color="black"/>
        <stop offset="1" stop-color="white"/>
      </linearGradient>
      <radialGradient id="curvedPipe" cx="0" cy="0" r="1">
        <stop offset="0.57" stop-color="white"/>
        <stop offset="0.677" stop-color="black"/>
        <stop offset="0.893" stop-color="black"/>
        <stop offset="1" stop-color="white"/>
      </radialGradient>
    </defs>
    
    <rect x="8" y="40" width="19" height="12" fill="url(#horizontalPipe)"/>
    <path d="M 27,40 A 16,16, 0,0,0 43,24 H 55 A 28,28, 0,0,1, 27,52 Z" fill="url(#curvedPipe)"/>
    <rect x="43" y="8" width="12" height="16" fill="url(#verticalPipe)"/>
</svg>

这篇关于SVG中路径的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！