HTML5实现可缩放不失真图形的五种方法：一、内联SVG；二、object标签引入外部SVG；三、iframe嵌入SVG；四、Canvas API绘制矢量路径；五、CSS mask-image或clip-path引用SVG遮罩。
如果您希望在网页中嵌入可缩放且不失真的图形，HTML5 提供了原生支持矢量图形的能力。以下是实现该目标的具体方法：
一、使用 SVG 元素直接嵌入矢量图形
SVG（Scalable Vector Graphics）是 HTML5 原生支持的 XML 格式矢量图形语言，可直接写入 HTML 文档内部，无需外部依赖，渲染精度高且响应式友好。
1、在 <body> 标签内插入 <svg> 标签，并设置 width 和 height 属性。
2、在 <svg> 标签内部添加图形元素，例如 <circle>、<rect>、<path> 等。
立即学习“前端免费学习笔记（深入）”；
3、为图形元素设置 fill、stroke、stroke-width 等属性控制样式。
4、可直接嵌入 CSS 类或内联样式，也可通过 JavaScript 动态修改 SVG 元素属性。
二、通过 object 标签引入外部 SVG 文件
将 SVG 代码保存为独立 .svg 文件后，可通过 <object> 标签嵌入页面，便于复用与维护，同时保留脚本和交互能力。
1、创建一个纯文本文件，扩展名为 .svg，内容以 <svg> 根元素开始并包含有效图形定义。
2、在 HTML 中使用 <object> 标签，设置 data 属性指向该 SVG 文件路径。
3、为 <object> 设置 type 属性为 "image/svg+xml"。
4、添加 width 和 height 属性确保尺寸可控，并可设 aria-label 提升可访问性。
三、使用 iframe 嵌入 SVG 资源
iframe 可隔离外部 SVG 的上下文，适用于需独立作用域或跨源加载的场景，但会限制 DOM 交互与样式继承。
1、准备一个单独的 HTML 文件，其 <body> 内仅包含一个 <svg> 元素及图形内容。
2、在主页面中插入 <iframe> 标签，通过 src 属性引用该 HTML 文件路径。
3、设置 width、height 和 frameborder="0" 以消除边框干扰。
4、若需通信，可通过 postMessage() 实现父页面与 iframe 内 SVG 页面的有限交互。
四、利用 Canvas API 绘制矢量路径
尽管 <canvas> 默认为位图渲染，但其 2D 上下文提供的路径绘制方法（如 beginPath()、moveTo()、lineTo()、arc()）可生成数学定义的矢量轮廓，配合高 DPI 缩放可模拟矢量效果。
1、在 HTML 中添加 <canvas> 元素，并设置 id 属性以便获取。
2、使用 JavaScript 获取 canvas 元素及其 getContext('2d') 对象。
3、调用 beginPath() 开始新路径，随后使用 moveTo()、lineTo()、arc() 等方法构建形状轮廓。
4、执行 stroke() 或 fill() 渲染路径，可通过 scale() 方法适配设备像素比以维持清晰度。
五、通过 CSS mask-image 或 clip-path 引用 SVG 图形作为遮罩
利用 SVG 定义的 <mask> 或 <clipPath> 元素，可在 CSS 中将其作为视觉裁切工具作用于任意 HTML 元素，实现基于矢量的非矩形布局与装饰效果。
1、在 HTML 中定义一个隐藏的 <svg> 块，内部包含 <mask> 或 <clipPath> 元素及其中的图形（如 <circle>、<path>）。
2、为该 <mask> 或 <clipPath> 设置唯一 id。
3、在 CSS 中对目标元素应用 mask-image: url(#mask-id) 或 clip-path: url(#clip-id)。
4、确保目标元素具有明确的 background 或内容，且容器未设置 overflow: hidden 干扰裁切效果。
