I
I
Ivan S. Glushko2015-10-31 05:58:22
css
Ivan S. Glushko, 2015-10-31 05:58:22

Is it possible to set a gradient in SVG from the start to the end of a line?

I don't understand, is it possible, without flipping the direction of the gradient, to set it from the start point of the segment to its end? In the example in the picture, the gradient affects both the beginning of the segment and the end.

<svg
  width="210mm"
  height="297mm"
  viewBox="0 0 744.09448819 1052.3622047"
  version="1.1">
<g>
  <g>
    <path stroke="url(#gradient)"
      style="fill:none;fill-rule:evenodd;stroke-width:8;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0999999;stroke-dasharray:none;stroke-opacity:1"
      d="m 30,452.3622 60,0 30,-30 70,0 30,30 55,0 60,60 0,240 -65,0 -30,30 -115,0"
      id="path7929-5"
      inkscape:connector-curvature="0"
      sodipodi:nodetypes="ccccccccccc" />

    <defs>
      <linearGradient id="gradient">
        <stop offset="0" stop-color="red"></stop>
        <stop offset="100%" stop-color="blue"></stop>
      </linearGradient>
    </defs>
  </g>
</g>
</svg>

dc19af92e1854a35b3ac89df2e1e0a47.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
T
tef, 2015-11-06
@tef

What if it's not a line, but a thin, curved rectangle?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question