All geek questions in one place

Directional Gradient in SVG Path Element

I am writing a simple web page that displays a graph and shows dependencies. I found unexpected behavior in the way path elements are displayed in svg .

Here's the full HTML for the example:

 <html> <body> <svg id="svgConnections" xmlns="http://www.w3.org/2000/svg" style="width: 300px; height: 120px"> <defs> <linearGradient id="grad1" > <stop offset="0%" style="stop-color:yellow;stop-opacity:1" /> <stop offset="100%" style="stop-color:red;stop-opacity:1" /> </linearGradient> </defs> <path d="M40,40 L100,100 Z" stroke="url(#grad1)" strokeWidth="1px" /> <path d="M200,100 L140,40 Z" stroke="url(#grad1)" strokeWidth="1px" /> </svg> </body> </html>

In the same example at https://jsfiddle.net/4fLjm0e2/

What bothers me is that the first line that goes from the upper left corner to the lower right corner looks exactly the same as the second line that goes “in reverse order”: from the lower right corner to the upper left corner.

How can I make the path always start with yellow and end with red?

+5
source share
1 answer

It's not a mistake. This is a problem in understanding.

The default behavior of a linear gradient is to move in a horizontal line from the left side of the object to its right side. It doesn't matter if you draw a path from left to right or from right to left. In both cases, the gradient will be displayed from left to right according to the default settings.

Consider the demo below:

 <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad1" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:yellow;stop-opacity:1" /> <stop offset="100%" style="stop-color:red;stop-opacity:1" /> </linearGradient> </defs> <g stroke-width="2"> <path d="M10,40 L110,40 Z" stroke="url(#grad1)" /> <path d="M110,70 L10,70 Z" stroke="url(#grad1)" /> </g> </svg>

If you want the color transition to occur along a vertical line or a line at an angle, you must specify the start point of the line with x1 and y1 and its end points with attributes x2 and y2 .

Instead of duplicating stops in each <linearGradient> element, we will use the xlink:href attribute to refer to the original gradient. Stops will be inherited, but the x- and y-coordinates will be overridden by each individual gradient.

 <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="1" x2="0" y2="0"></linearGradient>

Extension of the above example:

 <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad1" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> <linearGradient id="grad2" xlink:href="#grad1" x1="120" y1="0" x2="0" y2="0"></linearGradient> </defs> <g stroke-width="2"> <path d="M10,40 L110,40" stroke="url(#grad1)" /> <path d="M110,70 L10,70 Z" stroke="url(#grad2)" /> </g> </svg>

As in your example, you use diagonal paths, so we need to redefine the attributes x1 , y1 , x2 and y2 for both <linearGradient> elements.

  • These values ​​in the first <linearGradient> element will override the default settings from left to right to create a diagonal gradient from left to top left.
  • While on the <linearGradient> element, these values ​​will change the direction of the gradient ie from bottom to top.

Now we can apply these gradients to the corresponding paths.

 <svg width="300" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> <linearGradient id="grad2" xlink:href="#grad1" x1="1" y1="1" x2="0" y2="0"></linearGradient> </defs> <g stroke-width="2"> <path d="M40,40 L100,100 Z" stroke="url(#grad1)" /> <path d="M200,100 L140,40 Z" stroke="url(#grad2)" /> </g> </svg>

Note. This Question may be useful in the context of the current issue.

+3
source

Source: https://habr.com/ru/post/1271291/

More articles:


All Articles