1. 開発者向けのウェブ技術
  2. CSS: カスケーディングスタイルシート
  3. fill

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

fill

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年4月⁩.

fill は CSS のプロパティで、SVG のテキストコンテンツおよび SVG の図形の内部キャンバスをどのように塗りつぶすか、または描画するかを定義します。存在する場合、要素の fill 属性を上書きします。

SVG の図形やテキストの輪郭の内部領域は塗りつぶされます。図形の「内部」が常に明確であるとは限りません。図形を定義するパスは重なり合うことがあります。これらの複雑な図形の「内部」と見なされる領域は、fill-rule プロパティまたは属性によって明確化されます。

サブパスが開いている場合、fill は描画前にパスを閉じます。これは、サブパスの終点と最初の点を結ぶ "closepath" コマンドが含まれているかのように動作します。言い換えれば、fill は path 要素（つまり、closepath コマンドのないサブパス）および polyline 要素内の開いたサブパスに適用されます。

メモ: fillプロパティは、<svg> 内に含まれる, <ellipse>、<path>、<polygon>、<polyline>、<rect>、<text>、<textPath>、<tspan> の各要素にのみ適用されます。その他の SVG、HTML、擬似要素には適用されません。

構文

css
/* キーワード */
fill: none;
fill: context-fill;
fill: context-stroke;

/* <color> 値 */
fill: red;
fill: hsl(120deg 75% 25% / 60%);

/* <url> 値 */
fill: url("#gradientElementID");
fill: url("star.png");

/* 代替値付き <url> 値 */
fill: url("#gradientElementID") blue;
fill: url("star.png") none;

/* グローバル値 */
fill: inherit;
fill: initial;
fill: revert;
fill: revert-layer;
fill: unset;

値

none

fill は描画されません。ストローク内の領域は、もしあれば、透明になります。

context-fill

コンテキスト要素の fill から塗りつぶす値を使用します。

context-stroke

コンテキスト要素の stroke から塗りつぶす値を使用します。

<color>

塗りつぶし色は、任意の CSS <color> 値になります。

<url>

SVG ペイントサーバー要素（<linearGradient>、<radialGradient>、<pattern> など）への URL 参照。リソース参照の後に、任意で <color> または none を続けることができます。これは、参照されたペイントサーバーが解決されない場合、代替値として使用されます。

公式定義

初期値black
適用対象SVG shapes and text content elements
継承あり
計算値as specified, but with <color> values computed and <url> values made absolute
アニメーションの種類計算値の型による

形式文法

fill = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<svg-paint> = 
  child               |
  child( <integer> )  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

例

SVG 要素の fill 値の定義

この例では、 fill 属性の宣言方法、その効果、および CSS の fill プロパティが fill 属性よりも優先される仕組みを示しています。

HTML

SVG には、2 巣の複雑な図形を、 <polygon> および <path> 要素を使用して定義してあります。両方の fill 属性は既定では black に設定されています。濃い灰色（#666666）のストロークを SVG の stroke 属性を使用して追加していますが、代わりに stroke プロパティを使用することができます。

html
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="#666666"
    fill="black" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666666"
    fill="black" />
</svg>

CSS

SVG 内の図形に fill 値を設定します。

css
path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

結果

CSS の fill プロパティの値は SVG の fill 属性の値を上書きするため、両方の図形が赤色に塗りつぶされます。多角形の赤は半透明です。

fill のキーワード値の使用

この例は、fill のキーワード値を使用する方法を示しています。

HTML

3 つの <path> 要素と、パスのそれぞれの点に <circle> を追加する <marker> 要素があります。円マーカーは、SVG の stroke 属性と fill 属性を使用して、黒のストロークと灰色の塗りつぶしをつけて設定します。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
  <path
    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
  <marker
    id="circle"
    markerWidth="12"
    markerHeight="12"
    refX="6"
    refY="6"
    markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
  </marker>
</svg>

CSS

それぞれのパスに異なる stroke と fill の色を設定します。まずパス（赤い境界線を持つもの）は fill を none に設定しています。円形のマーカーのストロークと塗りつぶしは、context-stroke 値を使用して、それらがマークする要素のストロークと同じ色に設定します。

css
path {
  stroke-width: 2px;
  marker: url("#circle");
}
path:nth-of-type(1) {
  stroke: red;
  fill: none;
}
path:nth-of-type(2) {
  stroke: green;
  fill: lightgreen;
}
path:nth-of-type(3) {
  stroke: blue;
  fill: lightblue;
}
circle {
  stroke: context-stroke;
  fill: context-stroke;
}

結果

最初のパスが透明な背景を持つ点に注目してください。これは fill が none に設定されており、既定の fill である black を上書きしているためです。円はストロークの色で塗りつぶされています。値を context-fill に変更した場合、円は透明になり、red、green、blue の代わりに lightgreen と lightblue になります。

塗りつぶしと代替値

この例では、fill 値として代替値付きの url() 値を指定する方法を示しています。

HTML

指定された SVG には、2 つの <polygon> で描かれた星と、緑から金色、赤へと変化する <linearGradient> が含まれています。

html
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points="80,10 50,100 120,40 40,40 110,100" />
  <polygon points="180,10 150,100 220,40 140,40 210,100" />
</svg>

CSS

SVG 内の多角形に fill 値を設定し、 url() 値と代替値を提供します。

css
polygon:first-of-type {
  fill: url("#myGradient") magenta;
}
polygon:last-of-type {
  fill: url("#MISSINGIMAGE") magenta;
}

結果

最初の星はグラデーションを背景として使用しています。2 つ目 は、url() で参照された要素が存在しないため、代替値を使用しています。

仕様書

Specification
CSS Fill and Stroke Module Level 3
# fill-shorthand

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content