Cómo dar valor de color HSL a un elemento SVG

Question

quiero preguntar que si hubiera leído que es posible dar valor de color HSL a una SVG element.But cuando lo intento como éste

var color = hsl(0, 100%, 50%); 

circle.attr("fill" , color); 

I obtenido un error "número inesperado"

Puede alguien guía cuál es la forma correcta y también hace SVG es compatible con todos los colores HSL

Gracias

Answer 1

Simplemente

var color = hsl(0,100%,50%); 

línea significa, que se llama a la función con hsl0, 100%, 50% parámetros, y asignar valor devuelto a color variable.

Es necesario utilizar comillas, y pasar del color como string:

var color = "hsl(0, 100%, 50%)"; 

circle.attr("fill" , color); 

Para obtener más información acerca de HSL, leer here.

Y no mide si el color hsl es usado por SVG, o por otro elemento. Es solo una sintaxis para especificar color.

ACTUALIZACIÓN: Para dar color comportamiento variable aleatoria, intentar algo como esto:

var color = "hsl("+[0,0,0].map(function(){ return Math.round(100*Math.random())+"%"; }).join(',')+")"; 

Answer 2

Bueno, no sé si está utilizando una biblioteca JavaScript allí, pero que no se ve me gusta la sintaxis JS válida. Intenté esto y parece funcionar:

var color = "hsl(0, 100%, 50%)"; // use quotes around the value, since there's no hsl() function 
circle.setAttribute("fill", color); // setAttribute(), not attr() 
// this also works and is better than setAttribute() 
circle.style.fill = "hsl(120, 50%, 50%)"; 

Answer 3

No hay una función llamada hsl() en Javascript ni el relleno es un atributo. Es un estilo CSS. en HTML probarlo de la siguiente manera: -

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="100" r="50" style="fill:hsl(0, 100%, 50%);stroke-width:1;stroke:rgb(0,0,0)" /> 
</svg> 

Además, parece que está utilizando jQuery u otra biblioteca de Javascript similares, así tratar el siguiente código: -

var color = "hsl(0, 100%, 50%)"; 
circle.css("fill" , color);