HTML5提供CSS background-color和SVG两种原生方式绘制实心图形：一、CSS用div+background-color画矩形；二、SVG用画矩形；三、用画圆形；四、用画多边形；五、用画任意闭合路径。
如果您希望在网页中绘制实心图形，HTML5 提供了多种原生方式实现，无需依赖外部库。以下是使用 CSS background-color 和 SVG 两种主流方法的具体操作步骤：
一、使用 CSS background-color 绘制矩形实心图形
CSS background-color 可通过设置块级元素的背景色与尺寸，快速生成实心矩形。该方法适用于简单、静态、无交互需求的实心形状。
1、在 HTML 中创建一个 div 元素，并为其添加自定义类名，例如 solid-rect。
2、在 CSS 中定义该类：设置 width 和 height 为具体像素值（如 100px），并指定 background-color 为非透明颜色（如 #3498db）。
立即学习“前端免费学习笔记（深入）”；
3、确保该元素的 display 为 block 或 inline-block，且未设置 border 或 outline 干扰视觉边界。
二、使用 SVG 的 元素绘制实心矩形
SVG 是 HTML5 原生矢量图形标准，
1、在 HTML 中插入 svg> 标签，并设置其 width 和 height 属性（如 width="200" height="150"）。
2、在
3、设置 width 和 height（如 width="120" height="80"），并添加 fill 属性（如 fill="#e74c3c"）以实现实心填充。
三、使用 SVG 的 元素绘制实心圆形
当需要绘制实心圆时，SVG 的
1、在
2、设置 cx 和 cy 属性确定圆心坐标（如 cx="100" cy="100"）。
3、设置 r 属性定义半径（如 r="40"），并添加 fill 属性（如 fill="#2ecc71"）完成实心渲染。
四、使用 SVG 的 gon> 元素绘制实心多边形
对于三角形、五角星等任意闭合多边形，
1、在
2、设置 points 属性，按顺时针或逆时针顺序列出顶点坐标，各坐标对以空格分隔，x/y 值以逗号连接（如 points="50,15 100,100 0,100" 表示实心三角形）。
3、添加 fill 属性（如 fill="#9b59b6"），确保图形内部被完全着色。
五、使用 SVG 的 元素绘制任意实心封闭路径
1、在
2、设置 d 属性，以命令+参数形式描述路径；例如 M10,10 L90,10 L90,90 L10,90 Z 绘制实心矩形。
3、添加 fill 属性（如 fill="#f1c40f"），并确保路径末尾含 Z 或 z 以闭合路径。
