1

I try to draw a plumbing pipe in SVG. I know how to use a linear gradient in SVG to fill path and shape. I know also how trace path. I manage to draw pipe with rect balise but the filling of gradient is not good when it's come to path stroke.

EDIT 1: I want to have only one path so I have tried with border and box-shadow. I can use Javascript if it's the last resort.

CODE

<svg height="400" width="400">
  <defs>
    <linearGradient id="pipeGradient" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop offset="0%"  style="stop-color:rgb(0,0,0);      stop-opacity:1" />
      <stop offset="60%" style="stop-color:rgb(200,200,200);stop-opacity:0" />
      <stop offset="70%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(127,127,127);stop-opacity:1"/>
    </linearGradient>
  </defs>
  <!--good-->
  <rect width="300" height="40" fill="url(#pipeGradient)" x="80"/>
  <!-- the gradient don't follow path so is't not good-->
  <path d="M20,0 l1,150q0,50 50,50l150,0" stroke="url(#pipeGradient)" stroke-width="40" fill="transparent"/>
  <!-- see the curves and the end that don't look like pipe-->
</svg>

LIVE DEMO

https://jsfiddle.net/edqsd76a/1/

EXAMPLE

http://freneytique.free.fr/forum_wisi/tuyau01.png

http://media.gettyimages.com/vectors/metal-pipe-segments-vector-id578267596

https://fscomps.fotosearch.com/compc/CSP/CSP657/k6575834.jpg

http://freneytique.free.fr/forum_wisi/tuyau12.png

Et7f3XIV
  • 562
  • 1
  • 7
  • 20
  • Possible answer at [SVG path with gradient](https://stackoverflow.com/questions/46572970/svg-path-with-gradient/46574191#46574191) – ccprog Oct 28 '17 at 19:56
  • I want to have only one path but I keep the link. Thanks. – Et7f3XIV Oct 28 '17 at 20:20
  • 1
    See also: https://stackoverflow.com/questions/46173267/gradient-across-path-in-svg and https://stackoverflow.com/questions/43337435/creating-a-layer-of-gradient-within-an-svg-path-dynamically – Paul LeBeau Oct 29 '17 at 04:23

0 Answers0