168网站建设谷歌搜索引擎首页
<svg>元素
<svg>是一种用于描述二维矢量图形的 XML 格式，可以直接嵌入 HTML 文档中。
<svg>基本用法
<svg>的几种基本用法,包括圆形，正方形，三角形，直线 ，折线等
<body><svg width="180" height="100"><!-- 圆 --><circle cx="50" cy="50" r="40" storke-width="4" fill="yellow" /></svg><svg width="180" height="100"><!-- 正方形 --><rect x="10" y="10" width="80" height="80" fill="blue" /></svg><svg width="180" height="100"><!-- 椭圆 --><ellipse cx="50" cy="50" rx="30" ry="20" fill="green" /></svg><svg width="180" height="100"><!-- 直线 --><line x1="10" y1="10" x2="90" y2="90" stroke="black" /></svg><svg width="180" height="100"><!-- 三角形 --><polygon points="50,10 90,90 10,90" fill="purple" /></svg><svg width="300" height="200"><!-- 星型 --><polygon points="100,10,40,198,190,78,10,78,160,198"style="fill: lime; stroke: plum; stroke-width: 5; fill-rule: evenodd;"/></svg><svg width="180" height="100"><!-- 折线 --><polyline points="10,10 30,30 50,10 70,30 90,10" fill="none" stroke="black" /></svg>
</body>
<svg>也可以使用CSS属性
<svg width="100" height="100"><style>circle {fill: red;stroke: black;stroke-width: 3;}</style><circle cx="50" cy="50" r="40" /></svg>
<svg>高级特性
<svg>渐变
<svg width="180" height="100"><!-- 渐变 --><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /><stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /></linearGradient></defs><rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
</svg>
<svg>滤镜
<svg width="180" height="100"><!-- 滤镜 --><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />
</svg>
<svg>动画
<svg width="180" height="100"><!-- 动画 --><circle cx="50" cy="50" r="20" fill="red"><animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" /></circle>
</svg>
<svg>元素和<canvas>元素
SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式，每个图形元素都是DOM树的一部分。Canvas则是一个通过JavaScript API进行像素级绘制的位图画布，提供更底层的绘图控制。
核心技术区别
图形类型：
<svg>使用矢量图形描述，由数学方程定义形状
<canvas>生成位图图像，由像素矩阵构
DOM集成：
<svg>元素完全融入DOM，可单独操作和绑定事件
<canvas>作为整体DOM元素存在，内部图形无独立DOM表示
渲染机制：
<svg>采用保留模式渲染，自动管理图形状
<canvas>使用立即模式，开发者需手动控制绘制过程
交互能力：
<svg>原生支持图形级事件处理
<canvas>需手动实现点击检测等交互逻辑
性能特征对比
静态内容：
<svg>在渲染少量复杂图形时效率更高
<canvas>更适合处理大量动态图形元素
动画性能：
<svg>动画受DOM操作限制
<canvas>可通过清除重绘实现高效动画
内存占用：
<svg>内存消耗与图形复杂度相关
<canvas>内存占用由画布分辨率决定
适用场景分析
<svg>优势场景：
需要无限缩放的高质量图形
图形需要单独交互和样式控制
对可访问性和SEO有要求的项目
<canvas>优势场景：
数据可视化和大规模图形渲染
游戏开发和实时图像处理
需要像素级操作的应用