Question

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

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

circle.attr("fill" , color);

我收到错误“意外号码”

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

由于

Answer 1

简单地

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

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

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

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

 circle.attr("fill" , color);

有关HSL的详细信息，请阅读here。

并不是SVG或其他元素使用hsl颜色。它只是指定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);

如何为svg元素提供hsl颜色值

3 个答案: