How to give hsl color value to an svg element

Question

I want to ask that If have read that it is possible to give hsl color value to an svg element.But when I try it like this

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

circle.attr("fill" , color);

I got an error "unexpected number"

Can any one guide what is the correct way and also does svg supports all hsl colors

Thanks

Answer 1

Simply

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

line means, that you call hsl function with 0 ,100%, 50% parameters, and assign returned value to color variable.

You need to use quotes, and pass color as a string:

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

 circle.attr("fill" , color);

For more information about HSL, read here.

And it doesn't metter whether the hsl color is used by SVG, or by other element. It's just a syntax for specifing color.

UPDATE: To give color variable random behavior, try something like this:

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