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

在将颜色设置为红色的情况下，是否可以使用名称red而不是使用原始值作为输入？所以有些东西：

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

我想以这种方式设置颜色，因为我宁愿没有一个填充了精致颜色名称IE ["red","black","blue"....]的数组，而是为我决定创建的许多行生成随机颜色。

Answer 1

是的，您可以使用rgb，rgba和hex设置颜色，如下所示：

填充设置对象内部的颜色，笔划设置围绕对象绘制的线条的颜色。您可以使用在HTML中使用的相同css颜色命名方案，无论颜色名称（红色），rgb值（即rgb（255,0,0）），十六进制值，rgba值，等

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Answer 2

有几件事：

使用＆＃34; rgb（255,60,245）＆＃34;而不是＆＃34; 255,60,45＆＃34;
使用strokeWidth而不是width

工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

SVG：线条颜色

2 个答案: