html5怎么画实心_html5用CSS background-color或SVG画实心图形【绘制】

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 原生矢量图形标准， 元素通过 fill 属性直接定义填充色，可精确控制位置、尺寸和颜色，支持缩放不失真。

1、在 HTML 中插入 svg> 标签，并设置其 width 和 height 属性（如 width=”200″ height=”150″）。

2、在 标签，设置 x 和 y 定义左上角坐标（如 x=”20″ y=”30″）。

3、设置 width 和 height（如 width=”120″ height=”80″），并添加 fill 属性（如 fill=”#e74c3c”）以实现实心填充。

三、使用 SVG 的 元素绘制实心圆形

当需要绘制实心圆时，SVG 的 元素比 CSS border-radius 更可靠，能保证边缘平滑且尺寸精准。

1、在 元素。

2、设置 cx 和 cy 属性确定圆心坐标（如 cx=”100″ cy=”100″）。

3、设置 r 属性定义半径（如 r=”40″），并添加 fill 属性（如 fill=”#2ecc71″）完成实心渲染。

四、使用 SVG 的 gon> 元素绘制实心多边形

对于三角形、五角星等任意闭合多边形， 元素通过 points 属性列出顶点坐标，配合 fill 即可生成实心图形。

1、在 标签。

2、设置 points 属性，按顺时针或逆时针顺序列出顶点坐标，各坐标对以空格分隔，x/y 值以逗号连接（如 points=”50,15 100,100 0,100″ 表示实心三角形）。

3、添加 fill 属性（如 fill=”#9b59b6″），确保图形内部被完全着色。

五、使用 SVG 的 元素绘制任意实心封闭路径

是 SVG 最灵活的绘图元素，可通过 d 属性描述贝塞尔曲线、弧线、直线等组合路径，只要路径闭合（以 Z 或 z 结尾），fill 即生效。

1、在 标签。

2、设置 d 属性，以命令 + 参数形式描述路径；例如 M10,10 L90,10 L90,90 L10,90 Z 绘制实心矩形。

3、添加 fill 属性（如 fill=”#f1c40f”），并确保路径末尾含 Z 或 z 以闭合路径。