SVG（Scalable Vector Graphics）全面解析

🕗 发布于 2025-01-20 15:21 前端 svg

一、基础概念

矢量图形：SVG使用数学公式描述图形，因此可以无限缩放而不失真。
XML格式：SVG文件是纯文本，使用XML语法，易于编辑和生成。
分辨率无关：适合高分辨率显示，如Retina屏幕。
文件体积小：适合网络传输。

二、基本图形元素

1.简单几何图形

矩形 (`<rect>`)

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" fill="blue" stroke="black" stroke-width="2" />
</svg>

x, y：矩形左上角坐标。
width, height：矩形的宽度和高度。
fill：填充颜色。
stroke：描边颜色。
stroke-width：描边宽度。

圆形 (`<circle>`)

<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="red" stroke="black" stroke-width="3" />
</svg>

cx, cy：圆心坐标。
r：半径。

椭圆 (`<ellipse>`)

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="90" ry="40" fill="green" stroke="black" stroke-width="2" />
</svg>

rx, ry：椭圆在x轴和y轴上的半径。

直线（`<line>`）

<line x1="10" y1="10" x2="50" y2="50" />

x1、y1为起点坐标，x2、y2为终点坐标，绘制出一条从 (10, 10) 到 (50, 50) 的直线。

折线（`<polyline>`）

通过points属性定义一系列点，连接成折线。如

<polyline points="10,10 30,30 50,10" />

依次连接 (10, 10)、(30, 30)、(50, 10) 形成折线。

多边形（`<polygon>`）

同样使用points属性定义多个点，最后一点自动连接到第一点形成封闭图形。例如

<polygon points="10,10 30,30 50,10" />

构成一个封闭的三角形。

2.路径（`<path>`）

路径元素是 SVG 中最强大的图形定义工具，可绘制复杂图形。通过一系列绘图命令描述路径形状。

<svg width="200" height="200">
  <path d="M10 10 L100 100 Q150 50 200 100" fill="none" stroke="purple" stroke-width="3" />
</svg>

d：定义路径的指令。
- M：移动到某点。
- L：画直线。
- Q：画二次贝塞尔曲线。

<path d="M10,10 L50,10 L30,30 L50,50 L10,50 Z" 
fill="blue" stroke="black" stroke - width="1"/>

d属性中的命令依次为：M10,10将画笔移动到 (10, 10)；L50,10从当前点绘制直线到 (50, 10)；L30,30继续绘制直线到 (30, 30)；L50,50绘制到 (50, 50)；L10,50绘制到 (10, 50)；
Z表示闭合路径。通过fill属性填充蓝色，stroke和stroke - width设置黑色边框及宽度为 1。

绘制一个心形

<svg width="200" height="200">
  <path d="M100 20 C50 0, 0 50, 100 150 C200 50, 150 0, 100 20 Z" fill="red" />
</svg>

三、文本元素

1.基本文本添加

<text>元素用于在 SVG 图形中添加文本。通过x、y属性指定文本起始位置，并设置字体相关属性。例如：

<svg width="200" height="100">
  <text x="10" y="50" font-family="Arial" font-size="24" fill="orange">Hello SVG!</text>
</svg>

x, y：文本的起始坐标。
font-family：字体。
font-size：字体大小。

2. 文本沿路径排列

结合<textPath>元素，可使文本沿着指定路径排列。例如：

<path id="myPath" d="M 50,100 C 100,0 300,0 350,100" stroke="gray" fill="none"/>
<text>
    <textPath xlink:href="#myPath">This text follows a curved path.</textPath>
</text>

先定义了一条三次贝塞尔曲线路径myPath，然后<textPath>通过xlink:href属性引用该路径，使文本 “This text follows a curved path.” 沿着曲线排列。

四、图形样式与属性

1.填充与描边

填充（fill）：决定图形内部颜色，可使用颜色关键字（如red）、十六进制值（如#FF0000）、RGB 或 RGBA 值（如rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)）等。

<rect x="10" y="10" width="50" height="50" fill="green" />

描边（stroke）：设置图形轮廓的颜色和样式。stroke指定颜色，stroke - width设置线条宽度，stroke - dasharray创建虚线样式。

<rect x="10" y="10" width="50" height="50" 
stroke="red" stroke - width="2" stroke - dasharray="5, 5" />

绘制出一个红色边框、宽度为 2，且为虚线（线段长度 5，间距 5）的矩形。

2.变换属性

平移（translate）：transform="translate(x, y)"使图形在二维平面上沿 x 和 y 方向移动。例如，

<rect x="0" y="0" width="50" height="50" transform="translate(10, 20)" />

将原本位于 (0, 0) 的矩形移动到 (10, 20) 的位置。

旋转（rotate）：transform="rotate(angle, [cx, cy])"，angle为旋转角度，cx和cy可选，用于指定旋转中心（默认以图形中心旋转）。

<rect x="0" y="0" width="50" height="50" transform="rotate(45)" />

将矩形绕自身中心顺时针旋转 45 度。

缩放（scale）：transform="scale(sx, [sy])"，sx为水平缩放因子，sy可选，默认与sx相同。例如，

<rect x="0" y="0" width="50" height="50" transform="scale(2)" />

使矩形在水平和垂直方向上均放大为原来的 2 倍。

倾斜（skewX/skewY）：transform="skewX(angle)"或transform="skewY(angle)"使图形沿 x 或 y 轴倾斜。例如，

<rect x="0" y="0" width="50" height="50" transform="skewX(30)" />

让矩形沿 x 轴倾斜 30 度。

五、渐变和图案

1.线性渐变 (`<linearGradient>`)

线性渐变是沿着一条直线方向，从一个颜色平滑过渡到另一个颜色。

<svg width="200" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="80" fill="url(#grad1)" />
</svg>

<defs> 标签：
- 用于定义可重用的图形元素（如渐变、滤镜等）。
- 定义的渐变不会直接显示，需要被引用。
<linearGradient> 标签：
- 定义一个线性渐变。
- id="grad1"：为渐变设置一个唯一标识符，方便后续引用。
- x1, y1, x2, y2：定义渐变的方向。
  - x1="0%" y1="0%"：渐变的起点（左上角）。
  - x2="100%" y2="0%"：渐变的终点（右上角）。
  - 这里表示渐变从左到右水平方向。
<stop> 标签：
- 定义渐变中的颜色节点。
- offset：颜色的位置（百分比）。
  - offset="0%"：渐变的起点颜色。
  - offset="100%"：渐变的终点颜色。
- style="stop-color:rgb(255,0,0)"：定义颜色（这里是红色）。
- stop-opacity：定义颜色的透明度（1 表示完全不透明）。
引用渐变：
- 在 <rect> 中使用 fill="url(#grad1)"，将渐变应用到矩形中。

效果：

矩形从左到右，颜色从红色渐变到蓝色。

2. 径向渐变 (`<radialGradient>`)

径向渐变是从一个中心点向外辐射的渐变，颜色从中心向外平滑过渡。

<svg width="200" height="200">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <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" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="80" fill="url(#grad2)" />
</svg>

圆形从中心向外，颜色从黄色渐变到红色。

<defs> 标签：
- 同样用于定义可重用的图形元素。
<radialGradient> 标签：
- 定义一个径向渐变。
- id="grad2"：为渐变设置一个唯一标识符。
- cx, cy：定义渐变的中心点（这里是 50% 50%，即中心）。
- r：定义渐变的半径（这里是 50%，表示渐变覆盖整个图形）。
- fx, fy：定义渐变的焦点（这里是 50% 50%，与中心点重合）。
<stop> 标签：
- 定义渐变中的颜色节点。
- offset="0%"：渐变的中心颜色（黄色）。
- offset="100%"：渐变的边缘颜色（红色）。
- stop-color：定义颜色。
- stop-opacity：定义颜色的透明度。
引用渐变：
- 在 <circle> 中使用 fill="url(#grad2)"，将渐变应用到圆形中。

六、 SVG滤镜效果

1. 滤镜的基本结构

SVG滤镜通过 <filter> 标签定义，并在图形中引用。以下是滤镜的基本结构：

<svg width="200" height="200">
  <defs>
    <!-- 定义滤镜 -->
    <filter id="myFilter">
      <!-- 滤镜效果（如模糊、阴影等） -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <!-- 引用滤镜 -->
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#myFilter)" />
</svg>

<defs> 标签：
- 用于定义可重用的元素（如滤镜、渐变等）。
- 定义的滤镜不会直接显示，需要被引用。
<filter> 标签：
- 定义一个滤镜。
- id="myFilter"：为滤镜设置一个唯一标识符，方便后续引用。
<feGaussianBlur> 标签：
- 这是滤镜的一种效果，表示高斯模糊。
- in="SourceGraphic"：表示滤镜应用于原始图形。
- stdDeviation="5"：模糊的强度，值越大越模糊。
引用滤镜：
- 在 <rect> 中使用 filter="url(#myFilter)"，将滤镜应用到矩形中。

2. 常用滤镜效果

SVG提供了多种滤镜效果，以下是一些常见的滤镜：

1 高斯模糊 (`<feGaussianBlur>`)

作用：为图形添加模糊效果。
示例：

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#blur)" />
</svg>

stdDeviation="5"：模糊强度为5。

2 阴影 (`<feDropShadow>`)

作用：为图形添加阴影效果。
示例：

<svg width="200" height="200">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="black" flood-opacity="0.7" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#shadow)" />
</svg>

dx="5"：阴影在x轴方向的偏移。
dy="5"：阴影在y轴方向的偏移。
stdDeviation="3"：阴影的模糊强度。
flood-color="black"：阴影颜色。
flood-opacity="0.7"：阴影透明度。

3 颜色矩阵 (`<feColorMatrix>`)

作用：调整图形的颜色（如灰度、对比度等）。
示例：

<svg width="200" height="200">
  <defs>
    <filter id="grayscale">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#grayscale)" />
</svg>

type="saturate"：表示调整饱和度。
values="0"：将饱和度设为0，使图形变为灰度。

4 发光效果 (`<feGaussianBlur>` + `<feMerge>`)

作用：为图形添加发光效果。
示例：

<svg width="200" height="200">
  <defs>
    <filter id="glow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#glow)" />
</svg>

feGaussianBlur：先对图形进行模糊处理。
feMerge：将模糊后的图形和原始图形合并，形成发光效果。

3. 滤镜的组合使用

多个滤镜效果可以组合使用，形成更复杂的效果。

示例：模糊 + 阴影

<svg width="200" height="200">
  <defs>
    <filter id="blurAndShadow">
      <!-- 模糊效果 -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
      <!-- 阴影效果 -->
      <feDropShadow in="blur" dx="5" dy="5" stdDeviation="2" flood-color="black" flood-opacity="0.7" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="yellow" filter="url(#blurAndShadow)" />
</svg>

result="blur"：将模糊结果保存为中间结果。
in="blur"：将阴影效果应用到模糊后的图形。

4. 滤镜的工作原理

输入和输出：
- 每个滤镜效果都有一个输入（in）和输出（result）。
- 输入可以是原始图形（SourceGraphic）或其他滤镜的结果。
- 输出可以传递给下一个滤镜效果。
链式处理：
- 滤镜效果可以按顺序组合，形成复杂的视觉效果。

5. 总结

<filter>：用于定义滤镜。
滤镜效果：如模糊、阴影、颜色调整等。
引用滤镜：通过 filter="url(#id)" 将滤镜应用到图形。
组合使用：多个滤镜可以组合，形成更复杂的效果。

七、动画与交互

1.SMIL 动画

<svg width="200" height="100">
  <rect x="10" y="10" width="50" height="50" fill="blue">
    <animate attributeName="x" from="10" to="150" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

attributeName：需要动画的属性（如x、y、width等）。
from, to：动画的起始和结束值。
dur：动画持续时间。
repeatCount：动画重复次数。

2. JavaScript 交互

将 SVG 嵌入 HTML 页面后，可利用 JavaScript 实现交互功能。例如，通过点击改变矩形颜色：

<svg id="mySvg" width="100" height="100">
    <rect id="myRect" x="10" y="10" width="50" height="50" fill="blue" />
</svg>
<script>
    const rect = document.getElementById('myRect');
    rect.addEventListener('click', function() {
        this.style.fill ='red';
    });
</script>

通过getElementById获取 SVG 中的矩形元素，然后使用addEventListener监听点击事件，在事件处理函数中改变矩形的填充颜色。

3. SVG 的交互性

鼠标悬停效果

<svg width="200" height="100">
  <rect x="10" y="10" width="180" height="80" fill="blue" onmouseover="this.setAttribute('fill', 'red')" onmouseout="this.setAttribute('fill', 'blue')" />
</svg>

onmouseover 和 onmouseout：鼠标悬停和离开时触发的事件。

八、SVG 的嵌入和使用

1.直接嵌入HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Example</title>
</head>
<body>
  <svg width="200" height="100">
    <circle cx="100" cy="50" r="40" fill="orange" />
  </svg>
</body>
</html>

2.外部引用

<img src="example.svg" alt="Example SVG">

九、SVG 的应用场景

1.Web 设计

响应式图标：SVG 图标可在不同分辨率屏幕上清晰显示，且文件体积小，能有效提升网页加载速度。网站的导航栏图标、按钮图标等常采用 SVG 格式。
页面装饰图形：用于创建各种装饰性图案、背景纹理等，可通过 CSS 灵活控制样式，增强页面视觉效果。

2.数据可视化

统计图表：如柱状图、折线图、饼图等，可根据数据动态生成 SVG 图形。例如，展示不同城市的人口数量，可使用柱状图，每个柱子对应一个城市，柱子高度表示人口数量，方便直观地比较数据。
地图绘制：能够精确绘制地图轮廓、标注地理信息等，且在缩放地图时保持清晰度，广泛应用于在线地图服务。

3.移动应用

界面设计：为移动应用提供高质量的矢量图形资源，适配不同尺寸和分辨率的移动设备屏幕，确保在各种手机、平板上都能呈现出一致、精美的视觉效果。

十、SVG 的优势

分辨率无关：适合高分辨率显示。
文件体积小：适合网络传输。
可交互性：支持丰富的用户交互和动画效果。

十一、SVG 的工具和库

编辑工具：Adobe Illustrator、Inkscape。
JavaScript库：D3.js、Snap.svg。

原文地址：https://blog.csdn.net/m0_59276096/article/details/145248834

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

谈一谈前端构建工具的本地代理配置（Webpack与Vite）
使用代理之后，在浏览器中，前端访问还是原来的非跨域的接口，但实际请求后端的url可能早就被改的面目全非了。
阅读更多2025-01-21
摄像头模块如何应用在宠物产品领域
玩具中的摄像头可以检测宠物的接近和互动动作，例如当宠物拍打或者追逐玩具时，摄像头会捕捉宠物的表情和动作。主人可以通过手机看到宠物玩耍玩具时的可爱模样，并且可以根据宠物的反应来调整玩具的设置，如改变玩具
阅读更多2025-01-21
Kotlin 2.1.0 入门教程（三）
Kotlin 2.1.0 入门教程（三）。
阅读更多2025-01-21
Arcgis Pro安装完成后启动失败的解决办法
之前安装的Arcgis Pro 今天突然不能使用了，之前是可以使用的，自从系统更新了以后就出现了这个问题...
阅读更多2025-01-21
Ubuntu 完整卸载 WPS Office (deb包安装版)
Ubuntu完整卸载WPSOffice(deb包安装版)
阅读更多2025-01-21
力扣11-最后一个单词的长度
由若干单词组成，单词前后用一些空格字符隔开。是指仅由字母组成、不包含任何空格字符的最大子字符串。最后一个单词是长度为 6 的“joyboy”。最后一个单词是“World”，长度为 5。最后一个单词是“
阅读更多2025-01-21
云原生作业（四）
简述mysql主从复制原理及其工作过程，配置一主两从并验证。
阅读更多2025-01-21
LeetCode：37. 解数独
LeetCode：37. 解数独
阅读更多2025-01-21
leetcode763.划分字母区间
思路：遍历字符串，得到每个字母第一次和最后一次出现的下标位置。map<字母，[字母第一次出现位置，字母最后一次出现位置]>为保证题目“同一字母最多出现在一个片段中”，合并所有字母出现区间，
阅读更多2025-01-21
Datawhale组队学习笔记task2——leetcode面试题
教程内容来自Datawhale开源教程：https://github.com/datawhalechina/leetcode-notes/blob/main/docs/ch07/index.md在线学
阅读更多2025-01-21