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

行は、 、、パラメーターを指定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);