Question

我尝试在SVG中绘制一个管道管道。我知道如何在SVG中使用线性渐变来填充路径和形状。我也知道如何跟踪路径。我设法用直接的balise绘制管道但是当它走向路径时，渐变的填充不好。

编辑1： 我想只有一条路径所以我尝试过边框和框阴影。如果它是最后的手段，我可以使用Javascript。

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>

现场演示

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

示例

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

如何使用路径SVG旋转渐变

0 个答案: