javascript - 如何为 svg 元素赋予 hsl 颜色值

Question

我想问一下，如果已经读过可以为 svg 元素赋予 hsl 颜色值。但是当我这样尝试时

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

circle.attr("fill" , color);

我收到一个错误“意外号码”

任何人都可以指导什么是正确的方法，并且 svg 也支持所有 hsl 颜色

谢谢

Answer 1

简单地

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

line 表示，您使用, ,参数调用hsl函数，并将返回值分配给变量。0100%50%color

您需要使用引号，并将颜色作为string：

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

 circle.attr("fill" , color);

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

并且不考虑 hsl 颜色是由SVG还是由其他元素使用的。它只是一种用于指定的语法color。

更新：要提供color可变随机行为，请尝试以下操作：

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

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

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