My SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 -1 130 130">
<linearGradient id="line_color">
<stop stop-color="black" offset="0"/>
</linearGradient>
<line id="line" x1="0" y1="0" x2="100" y2="100" stroke="url(#line_color)" stroke-width="2"/>
<line id="dash" x1="64" x2="64" y1="0" y2="4" stroke="url(#line_color)" stroke-width="2"/>
<circle cx="50" cy="50" r="50" fill="none" stroke="url(#line_color)" stroke-width="2"/>
</svg>I have defined a color and applied it to #line, both Firefox and Chrome draw this line fine. But when I draw #dash with the same color, Firefox draws it like it should and Chrome doesn't. Circle is drawn just fine by both.
If #dash's stroke color is changed to "black", Chrome draws it.
Firefox 79.0 Chromium 84.0.4147.135
I've noticed Chrome's behavior in Ristretto, but Telegram's desktop client and Simple Gallery app on Android seem to draw lines like Firefox.