Jak nadać wartość koloru HSL do elementu svg

Question

Chcę zapytać, że jeśli przeczytałeś, że jest możliwe, aby podać wartość koloru HSL do SVG element.But gdy próbuję go jak ten

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

circle.attr("fill" , color); 

I masz błąd „nieoczekiwany numer”

może jedno przypomnienie, co jest poprawny sposób i robi również SVG obsługuje wszystkich kolorów HSL

Dzięki

Answer 1

Wystarczy

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

linia oznacza, że ​​zadzwonisz hsl funkcję z 0, 100%, 50% parametrów i przypisać zwracaną wartość color zmiennej.

Trzeba użyć cudzysłowów i przekazać kolor jako string:

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

circle.attr("fill" , color); 

Aby uzyskać więcej informacji o HSL przeczytać here.

I nie ma znaczenia, czy kolor hsl jest używany przez SVG, czy przez inny element. Jest to po prostu składnia dla określenia color.

UPDATE: Aby dać color zmiennej losowej zachowanie, spróbuj coś takiego:

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

Answer 2

No, ja nie wiem, czy używasz tam bibliotekę JavaScriptu, ale to nie wygląda jak poprawna składnia JS do mnie. Próbowałem tego i wydaje się działać:

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

Nie ma funkcji o nazwie hsl() w JavaScript ani wypełnienie jest atrybutem. To jest styl CSS. w HTML spróbować go w następujący sposób: -

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

Ponadto, wydaje się, używasz jQuery lub innego podobnego biblioteką JavaScript, zatem spróbować następujący kod: -

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