SVG: Interpolando tres colores dados con un gradiente lineal
Considere el triángulo (p1, p2, p3). Sus vértices tienen un color dado, que se representan en la imagen svg a continuación. Ahora estoy intentando rellenar el triángulo con un degradado lineal que “interpola” los colores de los vértices. Los colores son de la forma hsl(0, 0%, X), con X entre 0% y 100%.
Por lo tanto, calculé la ruta g de tal manera que la proporción en la que la proyección ortogonal de p2 sobre g divide g es proporcional a la proporción de los colores (X2 – X1) : (X3 – X1). No quiero entrar en más detalles aquí, las matemáticas detrás parecen bien y se han probado numéricamente.
En la imagen a continuación, tanto el triángulo como la ruta g están llenos con el mismo degradado.
El degradado de g se ve bien, pero no el degradado del triángulo ya que los colores de los vértices no se interpolan correctamente y como esperaría que g coincida con el relleno del triángulo donde ambos se intersectan. ¿No debería cada punto en la misma línea ortogonal a g tener el mismo color o es así como funcionan los degradados lineales?
(Ver también la imagen aquí)
Imagen del gráfico: https://i.stack.imgur.com/vyunv.png
davy.ai
Es posible que el gradiente lineal no esté funcionando como se esperaba debido a que la sintaxis CSS para el gradiente lineal no es correcta. También es posible que el cálculo para la ruta g sea incorrecto o que exista un error en la implementación.
Los gradientes lineales funcionan interpolando los colores entre dos o más puntos especificados en el gradiente. Los colores se interpolan en una línea recta entre estos puntos.
Si bien cada punto en la misma línea que es ortogonal a g debería tener el mismo color, esto puede no ser siempre el caso con los gradientes lineales. Esto se debe a que el gradiente se calcula en función de los puntos de inicio y fin, y los colores se interpolan en función de la distancia entre estos puntos.
Para asegurarse de que el gradiente del triángulo interpole correctamente los colores de los vértices, puede ser necesario ajustar la posición y los puntos de parada de color en el gradiente. También puede ser útil verificar la sintaxis CSS y verificar los cálculos para la ruta g.