2

次のコードを使用して、gh-pages で表示できる非常に単純な HTML ページがあります。

<!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'は color #FFFFFF、または white であると思います。しかし、それは他の色として表示されます。firebug で開いたところ、計算された色が #FFFFF であることがわかります。 ここに画像の説明を入力

4

3 に答える 3

3

SVG グラフィカル オブジェクトには、内部塗りつぶしの色とアウトライン ストロークの色の 2 つの色があります。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) であり、アルファ値なしで #FFFFFF に変換されます。さらに、「色」の値のみを指定すると、塗りや線などは一般的な色の値から計算されます。代わりに、フィルやストロークなどの svg 固有の属性を使用することをお勧めします。アルファを指定する場合は、rgb()..の代わりに、アルファ チャネルを含む完全な 16 進数表記で色を指定します。

于 2012-09-11T03:23:17.157 に答える