2

我有一个非常简单的 HTML 页面，可以使用以下代码在 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或白色。但它显示为其他颜色。我在萤火虫中打开它，它显示计算的颜色为#FFFFF： 在此处输入图像描述

4

3 回答 3

3

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

html color 属性在 SVG 中大部分是不用的，它只有在你使用 currentColor 时才起作用，所以你可以做 fill="currentColor" 并且填充颜色将与 html color 属性相同。

填充的默认值为黑色，描边的默认值为无。

因此，在您的情况下，您没有指定填充属性，而是得到黑色填充形状。

于 2012-09-11T09:36:43.957 回答
1

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

<rect style="fill:white" width="720" height="720" />
于 2012-09-11T03:20:39.280 回答
1

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

于 2012-09-11T03:23:17.157 回答