Creating a layer of gradient within an SVG path dynamically

问题

I am creating a dynamic path using my SVG. I now wish to add gradient to my path but I am stuck. The way I am trying, my gradient is coming along the path as shown in image 2 while I require it to be the kind in image 1.

Current

My gradient and stroke definitions are as follows :

    <defs>
        <linearGradient id = "grad1" spreadMethod="reflect">
            <stop offset="0%" style="stop-color: lightcoral;" />
            <stop offset="50%" style="stop-color: #ffffff;" />
            <stop offset="100%" style="stop-color: lightcoral;" />
        </linearGradient>
    </defs>
</svg>

script :

svgPath.setAttribute("stroke", "url(#grad1");`
svgPath.setAttribute("fill", "none");
svgPath.setAttribute("stroke-linejoin", "round");`
svgPath.setAttribute("stroke-width", "10");
});

回答1:

You can't make a gradient run along the stroke of a path, turning at the corners etc., if that's what you mean.

If instead you just want to make it so the gradient is oriented vertically, then you need to use the x, y1, x2 and y2 attributes to set the line along which the gradient runs. If you don't specify these attributes, the gradient is oriented horizontally as per your second image.

<linearGradient id = "grad1" spreadMethod="reflect" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" style="stop-color: lightcoral;" />
    <stop offset="50%" style="stop-color: #ffffff;" />
    <stop offset="100%" style="stop-color: lightcoral;" />
</linearGradient>

If you want to have a "pipe" like gradient effect, then the simplest method is to layer multiple paths of different stroke widths.

Here's a simple example to demonstrate.

<svg fill="none">
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#666" stroke-width="30"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#999" stroke-width="24"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#ccc" stroke-width="16"/>
  <polyline points="0,125, 150,125 150,25, 300,25" stroke="#eee" stroke-width="6"/>
</svg>

回答2:

Answer @Paul LeBeau inspires, very interesting technique - immitations of the gradient along the curvilinear path.

This technique can be used to animate the movement of fluid along the pipes, filling the vessels.
I tried to make such an example of animation. I hope someone will come in handy.

Steps to implement the animation:

We replace the polyline command from the example above, with thepath command.
All patches that imitate the shades of the pseudo-gradient are assigned the same class="poly"
we animate all patches at the same time, using the attributes stroke-dasharray,stroke-dashoffset

svg {
stroke-linejoin:round;
fill:none;
}
.poly {
stroke-dasharray: 850 850;
  stroke-dashoffset: 850;
  animation-duration: 7s;
  animation-name: draw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
} 

@keyframes draw {
  from {
    stroke-dashoffset: 850;
  }

  to {
    stroke-dashoffset: 0;
  }
}

<svg width="400" height="400" viewBox="0 0 400 400"> 
   <path             d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="30" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#4E4E4E" stroke-width="30" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#5C5C5C" stroke-width="28" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#6E6E6E" stroke-width="24" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#7C7C7C" stroke-width="22" /> 
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#828282" stroke-width="20" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#8D8D8D" stroke-width="18" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#9F9F9F" stroke-width="16" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#ADADAD" stroke-width="14" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#BDBDBD" stroke-width="8" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#C5C5C5" stroke-width="6" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D2D2D2" stroke-width="4" />
  <path class="poly" d="M0,125, 150,125 150,25, 300,25 300,175 0,175" stroke="#D6D6D6" stroke-width="2" />
</svg>

来源：https://stackoverflow.com/questions/43337435/creating-a-layer-of-gradient-within-an-svg-path-dynamically

标签

svg

path

mouseevent

gradient