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>