Làm thế nào để đưa ra giá trị màu HSL đến một yếu tố svg

Question

Tôi muốn hỏi rằng Nếu đã đọc rằng nó có thể cung cấp cho giá trị màu HSL một svg element.But khi tôi thử nó như thế này

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

circle.attr("fill" , color); 

tôi có một lỗi "số bất ngờ"

Can bất kỳ một hướng dẫn cách chính xác là những gì và cũng không svg hỗ trợ tất cả các màu HSL

Cảm ơn

Answer 1

Đơn giản chỉ cần

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

dòng phương tiện, mà bạn gọi hsl chức năng với 0, 100%, 50% thông số, và gán giá trị trả về color biến.

Bạn cần phải sử dụng dấu ngoặc kép, và thông qua màu sắc như một string:

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

circle.attr("fill" , color); 

Để biết thêm thông tin về HSL, đọc here.

Và nó không làm biến đổi xem màu hsl được sử dụng bởi SVG hay bởi phần tử khác. Đó chỉ là cú pháp để chỉ định color.

UPDATE: Để cung cấp cho color hành vi ngẫu nhiên biến, hãy thử một cái gì đó như thế này:

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

Answer 2

Vâng, tôi không biết nếu bạn đang sử dụng một thư viện JavaScript ở đó, nhưng điều đó không trông như cú pháp JS hợp lệ cho tôi. Tôi đã thử cách này và dường như hoạt động:

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

Không có hàm nào được gọi là hsl() trong Javascript không điền là thuộc tính. Đó là kiểu CSS. trong HTML thử nó theo cách sau: -

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

Ngoài ra, có vẻ như bạn đang sử dụng jQuery hoặc Thư viện Javascript khác tương tự, vậy thử đoạn mã sau: -

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