0

Update: Gets weirder. If the line is horizontal it disappears, but if it has any slope at all, it shows up just fine. Look at id="horizontalNoShow" if you change it so y1 and y2 are not equal, it will render.

I think this is a bug but not sure. Happens in Chrome and Safari. Trying to add an SVG linearGradient to a line.

I can add it to all other shapes, but when I add it to the line, the line disappears. Still shows up in the DOM, but just not getting rendered for some reason?

I have a purple line that shows up great. I have a rectangle with a gradient stroke that shows up great. But when I combine the gradient stroke with the line, it doesn't show up.

    <svg width="" height="">
      <defs>
        <linearGradient id="FirstGradient" >
          <stop offset="0%" style="stop-color:#FF00FF"/>
          <stop offset="100%" style="stop-color:#FFFF00"/>
        </linearGradient>
      </defs>
      <line id="someSlopeShow" x1="50" y1="70" x2="250" y2="71"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
      <line id="horizontalNoShow" x1="55" y1="90" x2="255" y2="90"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
      <rect id="exampleTwoRectSVG"
        x="10" y="10"
        width="200" height="100"
        stroke="url(#FirstGradient)"
        stroke-width="15"
        fill='transparent'
        stroke-dasharray="110 20"
      />
    </svg>

0

1 Answer 1

3

Found the answer. The spec for linearGradient show that is uses an object bounding box. https://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits

However in the last paragraph:

"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."

This makes sense since the box needs an area to work. And a horizontal line doesn’t have any area. 

A hacky fix is you can fix it by adding .001 to your coordinates to give it a tiny bit of area.

<svg width="" height="">
      <defs>
        <linearGradient id="FirstGradient" >
          <stop offset="0%" style="stop-color:#FF00FF"/>
          <stop offset="100%" style="stop-color:#FFFF00"/>
        </linearGradient>
      </defs>
      <line id="horizontalNoShow" x1="55" y1="90" x2="255" y2="90.001"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
</svg>

If I understand this correctly it means that none of the following features:

  1. linearGradient
  2. radialGradient
  3. pattern
  4. clipPath
  5. mask
  6. filter

will work if your line is horizontal or vertical.

I had a hard time finding the answer on StackOverFlow because I didn't realize it was the horizontal or vertical line that caused the issue.

These questions cover those well: How to add a linearGradient to a vertical SVG line

SVG Line with Gradient Stroke Won't Display if vertical or horizontal (this question name isn't great. Straight couldn't mean a lot of things.)

SVG Masks also don't work on vertical or horizontal lines: SVG Mask makes line disappear

feDropshadows also don't work on vertical or horizontal lines: Adding feDropShadow to a vertical line in SVG makes it disappear

Not the answer you're looking for? Browse other questions tagged or ask your own question.