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）

Iはachiveたい私は3つの別々の勾配または充填空間を有することである。

• 最初のものは、内側曲線からです曲がったチューブの中心（曲線）。
• 2番目は中央の領域です。
• チューブの中心部分から外側の曲線までの3番目のもの。

また、複数の停止色を持つ1つのグラデーションを使用することもできます。この場合、私は全体の曲線に沿って使用する勾配を示す追加矩形を https://i.imgur.com/oPEFAZT.png：

次の画像は、所望の結果を示しています。

私はSVGの高度なグラデーションに関するいくつかの研究をしましたが、それらを適用する方法や必要があれば理解できませんでした。 私は、矩形やカーブにも放射状と線形のグラデーションを適用する方法を理解していますが、期待される結果が得られませんでした。

また、私はCan I apply a gradient along an SVG path?を見つけました。それは左から右へ（言い換えれば）チューブに勾配を作り、上から下に向かって欲しいと思います。

皆さん、これを解決する方法はありますか？

Answer 1

一般に、パスに沿って流れる勾配を作成することはできません。

しかし、まっすぐな部分と円弧だけが含まれるような場合は、シェイプをセクションに分割することで効果を得ることができます。次に、各パートに異なる勾配を適用します。直線部分には<linearGradient>を使用し、曲線部分には<radialGredient>を使用します。

以下の例では、「パイプ」エフェクトに非常に単純化された勾配を使用しました。より良い3D効果を得るために、より多くのストップを追加することをお勧めします。

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

Answer 2

あなたはぼかしや照明で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>