javascript - SVG:线条颜色

Question

我有这样的 SVG 行变量:

var c_line = function (x1, y1, x2, y2, color) {

var c_svgLine = document.createElementNS(NS, "line");
c_svgLine.setAttributeNS(null, "x1", x1);
c_svgLine.setAttributeNS(null, "y1", y1);
c_svgLine.setAttributeNS(null, "x2", x2);
c_svgLine.setAttributeNS(null, "y2", y2);
c_svgLine.setAttributeNS(null, "class", "line");
c_svgLine.style.stroke = color;
c_svgLine.style.width = 5;
return c_svgLine;

};

该行是这样创建的:g，是 SVG 文档。

g.appendChild(c_line(50, 10, 100, 20,"red"));

在将颜色设置为红色的实例中，是否可以不使用名称红色而是使用原始值作为输入？所以类似的东西:

  g.appendChild(c_line(50, 10, 100, 20,"255,60,245")); 

我想以这种方式设置颜色，因为我宁愿没有一个充满精致颜色名称的数组 I.E ["red","black","blue"...] 但无论我决定创建多少行，都会生成随机颜色。

Answer 1

一些事情:

1. 使用“rgb(255,60,245)”代替“255,60,45”
2. 使用 strokeWidth 而不是宽度

工作示例

var NS = 'http://www.w3.org/2000/svg';

var c_line = function (x1, y1, x2, y2, color) {
    var c_svgLine = document.createElementNS(NS, "line");
    c_svgLine.setAttributeNS(null, "x1", x1);
    c_svgLine.setAttributeNS(null, "y1", y1);
    c_svgLine.setAttributeNS(null, "x2", x2);
    c_svgLine.setAttributeNS(null, "y2", y2);
    c_svgLine.setAttributeNS(null, "class", "line");
    c_svgLine.style.stroke = color;
    c_svgLine.style.strokeWidth = 5;
    return c_svgLine;

};

var g = document.getElementById("g");
g.appendChild(c_line(50, 10, 100, 20, "rgb(0,60,245)"));
g.appendChild(c_line(70, 10, 150, 10, "rgb(255,60,245)"));

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g id="g"></g>
</svg>