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

svg html5 ejemplos

Question

Estoy intentando replicar un <hr> 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á.

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

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

Answer 1

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.

Answer 2

Robert Longson da una excelente explicación. Pero a veces userSpaceOnUse es un problema, ya que propaga la interpolación en todo el lienzo, 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,

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

dibujará una línea recta con gradiente.