SVG形狀的fill定義了其輪廓內(nèi)的形狀的顏色。換句話說，SVG形狀的表面。填充是您可以為任何SVG形狀設(shè)置的基本SVG CSS屬性之一。
SVG形狀的填充是形狀輪廓內(nèi)的填充。這是一個SVG填充示例：
<svg width="500" height="100"><circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff;" /></svg>測試看看?/?
此示例定義了一個使用藍(lán)色(#0000ff)填充顏色但沒有描邊顏色的圓。 以下是生成的圖像：
您可以將SVG筆觸和填充顏色組合為SVG形狀。這是一個SVG筆觸和填充示例：
<svg width="500" height="100"><circle cx="50" cy="50" r="25" style="stroke: #000066; fill: #3333ff;" /></svg>測試看看?/?
此示例使用較深的藍(lán)色(#000066)描邊顏色和較淺的藍(lán)色(#3333ff)填充顏色定義圓。 以下是生成的圖像：
SVG CSS屬性 fill-opacity 用于設(shè)置形狀的填充顏色的不透明度。 fill-opacity 使用介于0和1之間的數(shù)值。值越接近0，填充越透明。 值越接近1，填充越不透明。 默認(rèn)fill-opacity值為1，這意味著填充顏色是完全不透明的。
這是一個SVG填充不透明度 fill-opacity示例，其中包含兩個具有不同(fill-opacity)的圓：
<svg width="500" height="120"> <text x="22" y="40">Text Behind Shape</text> <circle cx="50" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.3; "></path> <circle cx="120" cy="50" r="25" style="stroke: none; fill: #0000ff; fill-opacity: 0.7; "></path> </svg>測試看看?/?
這是生成的圖像。
請注意，右圓圈后面的文本比左圓圈后面的文本更不可見。那是因為右圓fill-opacity比左圓高。
fill-rule決定的復(fù)雜形狀的填充方式。fill-rule可以采用兩個不同的值 。這些值是：
nonzero
evenodd
通常，這兩個值是確定形狀內(nèi)部和外部形狀的規(guī)則。僅內(nèi)部填充，對于一個圓來說，這很簡單，但是對于更復(fù)雜的形狀，這并不是那么容易?？催@個 <path>示例：
<svg width="500" height="120"> <path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: nonzero; "></path> <path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40 M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: nonzero;"></path> </svg>測試看看?/?
這兩個路徑示例各有8條線，每條線都以菱形繪制，其中較大的菱形包含較小的菱形。在左側(cè)路徑中，內(nèi)部菱形是從左向右（順時針）繪制的。在右邊的路徑中，內(nèi)部菱形從右到左（逆時針）繪制。這是使用fill-rule：non-zero繪制時的結(jié)果圖像
正如您看到的，該nonzero規(guī)則將根據(jù)形狀繪制內(nèi)部菱形的方向和內(nèi)部菱形的形狀。nonzero確定點(diǎn)是在形狀的內(nèi)部還是外部的規(guī)則是：
在任意方向上從點(diǎn)到無窮遠(yuǎn)繪制一條線（射線）。形狀中的路徑每次穿過此射線時，如果路徑從左到右穿過射線，則將1加到計數(shù)器上；如果路徑是從右到左穿過射線，則從計數(shù)器中減去1。計算完所有穿過射線的路徑后，如果總計數(shù)為零，則該點(diǎn)被視為路徑之外。如果總計數(shù)不為零，則將點(diǎn)視為路徑內(nèi)。
這是相同的路徑示例，使用fill-rule：evenodd
<svg width="500" height="120"> <path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40 M50,40 l20,20 l-20,20 l-20,-20 l20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: evenodd;" ></path> <path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40 M150,40 l-20,20 l20,20 l20,-20 l-20,-20" style="stroke: #000000; fill: #6666ff; fill-rule: evenodd;" ></path> </svg>測試看看?/?
運(yùn)行后圖像效果：
evenodd字面意思是“奇偶”。按該規(guī)則，要判斷一個點(diǎn)是否在圖形內(nèi)，從該點(diǎn)作任意方向的一條射線，然后檢測射線與圖形路徑的交點(diǎn)的數(shù)量。在任意方向上從點(diǎn)到無窮遠(yuǎn)繪制一條線（射線）。每當(dāng)路徑穿過射線時，都增加一個計數(shù)器。如果總數(shù)是偶數(shù)，則該點(diǎn)在外面。如果總計數(shù)為奇數(shù)，則該點(diǎn)位于形狀內(nèi)部。