SVG 填充屬性
SVG 填充屬性
fill 屬性設定元素內部的顏色。
在這裡我們將介紹三個 fill 屬性
-
fill- 設定元素內部的顏色 -
fill-opacity- 設定元素內部顏色的不透明度 -
fill-rule- 設定用於確定形狀內部部分的演算法
SVG fill 屬性
fill 屬性定義了元素的內部顏色。
fill 屬性可用於以下 SVG 元素： <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> and <tspan>。
fill 屬性的值可以是顏色名稱、rgb 值或十六進位制值。
這裡我們為多邊形、矩形、圓形和文字使用了 fill 屬性
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" />
<rect width="150" height="100" x="120" y="50" fill="blue" />
<circle r="45" cx="350" cy="100" fill="red" />
<text x="420" y="100" fill="red">I love SVG!</text>
</svg>
自己動手試一試 »
SVG fill-opacity 屬性
fill-opacity 屬性定義了填充顏色的不透明度。
fill-opacity 屬性可用於以下 SVG 元素： <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> and <tspan>。
fill-opacity 屬性的值從 0 到 1（或 0% 到 100%）。
這裡我們為多邊形、矩形、圓形和文字使用了 fill-opacity 屬性
這是 SVG 程式碼
示例
<svg width="600" height="220" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,10 0,190 100,190" fill="lime" fill-opacity="0.5" />
<rect width="150" height="100" x="120" y="50" fill="blue" fill-opacity="50%" />
<circle r="45" cx="350" cy="100" fill="red" fill-opacity="0.6" />
<text x="420" y="100" fill="red" fill-opacity="70%">I love SVG!</text>
</svg>
自己動手試一試 »
SVG fill-rule 屬性
fill-rule 屬性定義了用於確定形狀內部部分的演算法。
fill-rule 屬性可用於以下 SVG 元素： <path>, <polygon>, <polyline>, <text>, <textPath>, <tref> and <tspan>。
fill-rule 屬性的值可以是 "nonzero" 或 "evenodd"。
這裡我們為多邊形使用了 fill-rule 屬性，值為 "evenodd"
這是 SVG 程式碼
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="evenodd" />
</svg>
自己動手試一試 »
這裡我們為多邊形使用了 fill-rule 屬性，值為 "nonzero"
這是 SVG 程式碼
示例
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198" fill="lime" fill-rule="nonzero" />
</svg>
自己動手試一試 »
