La línea SVG con trazo de degradado no se mostrará en línea recta

Estoy intentando replicar un


con SVG. Ahora, hacer una línea recta con SVG funciona perfectamente, pero en el segundo que lo acaricio con un gradiente ya no se mostrará en línea recta.

El siguiente código funciona, pero tome nota, y1 e y2 deben estar separados por 1 unidad. Si configuro y1 e y2 en 210, por ejemplo, la línea desaparecerá.

         

Probablemente estoy perdiendo alguna función obvia de gradientes lineales, y la línea se ve bien, pero prefiero simplemente tenerla recta. Gracias.

Está atrapado por el último párrafo en esta parte de la especificación SVG

La palabra clave objectBoundingBox no se debe usar cuando la geometría del elemento aplicable no tiene ancho ni altura, como en el caso de una línea horizontal o vertical, incluso cuando la línea tiene un grosor real cuando se visualiza debido a que tiene un ancho de carrera distinto de cero desde ancho de trazo se ignora para los cálculos de cuadro delimitador. Cuando la geometría del elemento aplicable no tiene ancho ni alto y se especifica objectBoundingBox, se ignorará el efecto dado (por ejemplo, un degradado o un filtro).

objectBoundingBox es el valor predeterminado para gradientUnits, por lo que debe usar gradientUnits = “userSpaceOnUse” y luego ajustar los valores para que sean apropiados para el sistema de coordenadas diferente.

Robert Longson da una excelente explicación. Pero a veces userSpaceOnUse es un problema, ya que propaga la interpolación en todo el canvas, en lugar de solo la línea.

En su lugar, puede agregar una pequeña cantidad a los valores, para asegurar que el tamaño de la caja no sea cero.

Por ejemplo,

   

dibujará una línea recta con gradiente.

Suponiendo que no quiere ninguna precisión en absoluto, puede cambiar la línea a una ruta completa como se muestra a continuación

  

o alternativamente a un rectificado como el siguiente

  

También es interesante observar que este problema solo afecta a las líneas verticales y horizontales. La línea inclinada se visualiza correctamente.