Question

我有一个非常简单的HTML页面viewable on gh-pages，其中包含以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link href="style.css" media="screen" rel="stylesheet" type="text/css">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
    </script>
  </head>
  <body>
    <div id="page">
      <div id="content">
        <div id="heatmap">
          <svg style="margin-left: 80px; color: rgb(255, 255, 255);" width="800" height="880">
            <g transform="translate(80,80)">
              <rect style="color: rgb(255, 255, 255);" height="720" width="720">
              </rect>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </body>
</html>

使用以下CSS：

body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}

#wrapper {
margin: 0 auto;
padding: 0;
}

#page {
width: 1000px;
margin: 0 auto;
padding: 40px 0px 0px 0px;
}

#content {
float: left;
width: 660px;
padding: 0px 0px 0px 0px;
background: #FFFFFF;
}

我希望矩形'svg rect'为颜色#FFFFFF或白色。但它显示出一些其他颜色。我在firebug中打开它，它显示计算颜色为#FFFFF： enter image description here

Answer 1

SVG图形对象有两种颜色，内部填充颜色和轮廓描边颜色。 SVG使用填充和描边属性来控制这些颜色。

html颜色属性在SVG中大部分未使用，它仅在使用currentColor时才会运行，因此您可以执行fill =“currentColor”，填充颜色将与html颜色属性相同。

fill的默认值为黑色，stroke的默认值为none。

因此，在您的情况下，您没有指定填充属性，并且您获得了黑色填充形状。

Answer 2

要更改矩形的颜色，请更改填充样式：

<rect style="fill:white" width="720" height="720" />

Answer 3

颜色取自svg中的内联样式。这是rgb（255,255,255），它转换为没有alpha值的#FFFFFF。此外，当您仅指定“颜色”值时，填充和描边等将根据通用颜色值计算。因此，最好使用填充和描边的svg特定属性等。如果要指定alpha，请指定包含alpha通道的完整十六进制表示法的颜色，而不是rgb（）..

无法弄清楚svg元素的颜色

3 个答案: