SVG 填充属性
SVG 填充属性
The fill 属性设置元素内部的颜色。
这里我们将介绍三个 fill 属性
-
fill- 设置元素内部的颜色 -
fill-opacity- 设置元素内部颜色的透明度 -
fill-rule- 设置用于确定形状内部部分的算法
SVG 填充属性
The fill 属性定义元素内部的颜色。
The fill 属性可以与以下 SVG 元素一起使用：<circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> 和 <tspan>.
The 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">我爱 SVG!</text>
</svg>
自己试试 »
SVG fill-opacity 属性
The fill-opacity 属性定义填充颜色的透明度。
The fill-opacity 属性可以与以下 SVG 元素一起使用：<circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> 和 <tspan>.
The 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%">我爱 SVG!</text>
</svg>
自己试试 »
SVG fill-rule 属性
The fill-rule 属性定义用于确定形状内部部分的算法。
The fill-rule 属性可以与以下 SVG 元素一起使用：<path>, <polygon>, <polyline>, <text>, <textPath>, <tref> 和 <tspan>.
The 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>
自己试试 »
