Home/ Questions/Q 8576425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T19:55:16+00:00

I have a very simple HTML page, viewable on gh-pages with the following code:

  • 0

I have a very simple HTML page, viewable on gh-pages with the following code:

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

with the following 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;
}

I expect the rectangle, 'svg rect' to be the color #FFFFFF, or white. But it shows up as some other color. I opened it up in firebug, and it shows the computed color to be #FFFFF:
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    SVG graphical objects have two colours, an internal fill colour and an outline stroke color. SVG uses the fill and stroke properties to control these colours.

    The html color property is mostly unused in SVG, it only operates when you use currentColor so you can do fill=”currentColor” and the fill colour will become the same as the html color property.

    The default value for fill is black and the default for stroke is none.

    So in your case you haven’t specified a fill property and you get a black filled shape.

    • 0