菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

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 属性

I love SVG! Sorry, your browser does not support inline SVG.

这是 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 属性

I love SVG! Sorry, your browser does not support inline SVG.

这是 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"

Sorry, your browser does not support inline SVG.

这是 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"

Sorry, your browser does not support inline SVG.

这是 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>
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持