SVG（Scalable Vector Graphics，缩放矢量图形）是一种用于描述二维矢量图形的 XML 格式。HTML5 支持内联使用 SVG 图像，使得 SVG 可以直接嵌入到 HTML 页面中，而不需要引用外部文件。这为网页设计和开发带来了更大的灵活性，允许开发者直接操作图形，并且在响应式布局中表现优秀。
内联 SVG 是指将 SVG 代码直接嵌入到 HTML 文档中，而不是通过 <img> 标签加载外部的 SVG 文件。
1. 基本语法
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg>：定义一个 SVG 图形容器。width和height：指定 SVG 的宽度和高度。xmlns：声明 XML 命名空间，这是必需的属性。
<circle>：定义一个圆形。cx和cy：圆心的坐标。r：圆的半径。stroke：圆的边框颜色。stroke-width：边框的宽度。fill：圆的填充颜色。
2. 常见 SVG 图形元素
1. 矩形（<rect>）
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>
<rect>：绘制矩形。x和y：矩形左上角的坐标。width和height：矩形的宽度和高度。fill：填充颜色。
2. 直线（<line>）
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="2" />
</svg>
<line>：绘制直线。x1和y1：直线起点坐标。x2和y2：直线终点坐标。stroke：线条的颜色。stroke-width：线条宽度。
3. 多边形（<polygon>）
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="purple" />
</svg>
<polygon>：绘制多边形。points：定义多边形的各个顶点坐标，坐标值用空格分隔。
4. 路径（<path>）
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" stroke-width="2" fill="transparent" />
</svg>
<path>：绘制任意形状的路径。d：定义路径的绘制命令（如移动到某个点M，绘制贝塞尔曲线C，绘制弯曲的线S）。stroke和fill：控制路径的边框和填充颜色。
3. 样式和颜色
SVG 元素支持与 HTML 元素相同的样式属性，可以使用 CSS 来控制它们的外观。也可以通过 SVG 内部样式（style）属性进行定义。
使用内联 CSS
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid black;">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="yellow" />
</svg>
style：为 SVG 元素应用 CSS 样式。
使用外部 CSS
<style>
svg circle {
fill: orange;
stroke: blue;
stroke-width: 4;
}
</style>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" />
</svg>
- 外部 CSS：可以在
<style>标签中定义，也可以通过外部 CSS 文件链接到 SVG。
4. 动画和交互
SVG 支持动画效果，可以使用 CSS 动画和 SVG 动画元素，如 <animate> 和 <animateTransform>。
使用 CSS 动画
<style>
@keyframes moveCircle {
0% { cx: 50; cy: 50; }
100% { cx: 150; cy: 150; }
}
circle {
animation: moveCircle 2s infinite alternate;
}
</style>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="20" fill="red" />
</svg>
- CSS 动画：在 SVG 中通过
@keyframes定义动画，动态地改变cx和cy属性来移动圆形。
使用 <animate> 元素
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="20" fill="blue">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
<animate>：动画效果，通过attributeName指定要动画化的属性，from和to指定动画的起始和结束值。
5. SVG 与 JavaScript 交互
你可以通过 JavaScript 操作和控制 SVG 图形，实现更复杂的交互和动画效果。
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="20" fill="blue" />
</svg>
<script>
var circle = document.getElementById("myCircle");
circle.addEventListener("click", function() {
circle.setAttribute("fill", "red");
});
</script>
- 事件监听：通过 JavaScript 绑定事件，可以让 SVG 元素对用户的操作作出响应（如点击改变颜色）。
6. 优点和应用
- 可缩放性：SVG 是基于矢量的图形格式，不管缩放多少倍都不会失真，适合响应式设计。
- 小文件大小：SVG 文件通常比其他图像格式（如 PNG 和 JPEG）小，尤其是在复杂图形上，SVG 的文件大小通常较小。
- 易于修改：SVG 图形是文本格式，可以直接修改其中的属性（如颜色、大小、形状）来进行定制。
- 动画和交互性：SVG 可以与 CSS 和 JavaScript 集成，创建动画效果和复杂交互。
总结
HTML5 的内联 SVG 提供了一种强大的方式来在网页中展示图形和动画。通过内联 SVG，开发者能够直接在 HTML 文档中编写图形，享受其灵活性和可交互性，并且可以使用 CSS 和 JavaScript 来增强其功能。SVG 在现代网页设计中越来越重要，尤其在需要响应式图形和动态效果时。
发表回复