如何为SVG元素设置HSL颜色值

Question

我想问一下，我看到可以给SVG元素赋予HSL颜色值，但是当我像这样尝试时：

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

circle.attr("fill" , color);

我收到一个"意外数字"的错误。

是否有人可以指导正确的方法，同时SVG是否支持所有HSL颜色。

谢谢

- A_user

Answer 1

简单地说

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

这句话的意思是，你使用 hsl 函数，并使用参数 0、100%、50% 调用该函数，并将返回的值赋给变量 color。

你需要使用引号，并将颜色作为一个 字符串 传递：

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

 circle.attr("fill" , color);

了解有关 HSL 的更多信息，请阅读此处。

无论是通过 SVG 还是其他元素使用 HSL 颜色，都没有关系。这只是一种指定 color 的语法。

更新：要给color变量随机行为，可以尝试以下方式：

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

- Engineer

---

如果有人关心的话，生成的随机颜色无效。色相范围在0-360之间，以角度表示，而非百分比。 - akinuri

Answer 2

嗯，我不知道你是否在使用JavaScript库，但那看起来不像是有效的JS语法。我尝试了一下，似乎这个可以工作：

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%)";

- Sergiu Dumitriu

Answer 3

Javascript中没有名为hsl()的函数，fill也不是一个属性。 它是CSS样式。 在HTML中尝试以下方式：-

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

另外，看起来你正在使用jQuery或其他类似的JavaScript库，因此请尝试以下代码：

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

- Malay Sarkar

---

在SVG中，fill是一个被映射到等效CSS样式的属性。 - Robert Longson