28

I'm attempting to replicate an <hr> with SVG. Now, making a straight line with SVG works perfectly, but the second I stroke it with a gradient it will no longer display in a straight line.

The following code works, but take note, y1 and y2 must be 1 unit apart. If I set y1 and y2 to 210 for instance, the line will disappear.

<defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
        <stop offset="50%" style="stop-color:rgba(0,0,0,0.75);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
    </linearGradient>
</defs>
<line x1="40" y1="210" x2="460" y2="211" stroke="url(#grad1)" stroke-width="1" />

I'm probably just missing some obvious function of linear gradients, and the line looks alright, but I'd much rather just have it straight. Thanks.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
foxandsticks
  • 349
  • 3
  • 9

3 Answers3

58

You are getting caught out by the last paragraph in this part of the SVG specification

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

objectBoundingBox is the default for gradientUnits so you need to use gradientUnits="userSpaceOnUse" and then adjust the values to be appropriate for the different coordinate system.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • 7
    Thank you, this worked perfectly! I added the gradientUnits="userSpaceOnUse" to the gradient element and changed the y2 value to match the y1 value. Success! – foxandsticks Feb 10 '14 at 16:09
22

Robert Longson gives an excellent explanation. But sometimes userSpaceOnUse is a pain, because it spreads the interpolation over the entire canvas, instead of just the line.

Instead, you could add a tiny amount to the values, to ensure the bbox size is not zero.

For example,

  <line x1="40" y1="210" x2="460" y2="210.001" stroke="url(#grad1)" stroke-width="1" />

will draw a straight line with gradient.

John Henckel
  • 10,274
  • 3
  • 79
  • 79
  • What if I have a `` straight path? Can I do something? In my case I have many paths on the screen and `userSpaceOnUse` just removes the applied gradient on those paths – Mateut Alin Dec 08 '20 at 11:19
  • *EDIT* Never mind, I added x1 and x2 to the `linearGradient` and now works properly (see https://observablehq.com/@d3/sankey-diagram) – Mateut Alin Dec 08 '20 at 11:48
  • I used to adopt the accepted answer approach, till today. Once I realized the deep implications of the reference system I switched to this one. I had a path too as @MTZ said and I just added a tiny value to my y coordinate, thus `myObject.y = myObject.y + 0.0001` and it worked! – A. D'Alfonso Mar 04 '21 at 16:17
4

Assuming you do not want any in-accuracy at all, you can change the line to a filled path as below

<path d='M 40 209.5 L 460 209.5 L 460 210.5 L 40 210.5' fill='url(#grad1)' />

or alternatively to a filled rect as below

<rect x=40 y=209.5 width=420 height=1 fill='url(#grad1)' />

It is also interesting to note that this issue only affects vertical and horizontal lines. Slanted line display correctly.

Steve Brooker
  • 1,043
  • 11
  • 28