当前位置：首页 > article >正文

深入 SVG：矢量图形、滤镜与动态交互开发指南

article 2026/2/23 18:26:27

1.SVG 详细介绍

SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形格式，用于描述二维图形。

1. 命名空间 (Namespace)

命名空间 URI：http://www.w3.org/2000/svg
用途：在 XML 或 XHTML 中区分不同标记语言的元素。

声明方式：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><!-- SVG 内容 -->
</svg>

2. SVG API

DOM API：通过 JavaScript 操作 SVG 元素。

创建元素：document.createElementNS(namespaceURI, tagName)

示例：

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
document.body.appendChild(svg);

SVG DOM 接口：如 SVGElement, SVGRectElement, SVGPathElement 等，提供特定元素的属性和方法。
动画 API：支持 SMIL（已部分弃用）、CSS 动画或 JavaScript 动画库（如 GSAP）。

3. 常用 SVG 代码示例

示例 3.1 - 基本形状

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 基本形状</title>
</head>
<body><svg width="400" height="300"><!-- 矩形 --><rect x="10" y="10" width="50" height="30" fill="blue" stroke="black" stroke-width="2"/><!-- 圆形 --><circle cx="100" cy="50" r="30" fill="red"/><!-- 椭圆 --><ellipse cx="200" cy="50" rx="40" ry="20" fill="green"/><!-- 线条 --><line x1="10" y1="100" x2="150" y2="100" stroke="purple" stroke-width="3"/><!-- 折线 --><polyline points="10,150 50,120 90,180" fill="none" stroke="orange"/><!-- 多边形 --><polygon points="200,150 250,120 300,180" fill="yellow" stroke="brown"/></svg>
</body>
</html>

示例 3.2 - 路径（Path）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 路径</title>
</head>
<body><svg width="200" height="200"><path d="M10 80 Q 100 10 190 80 T 370 80"fill="none" stroke="black" stroke-width="2"/></svg>
</body>
</html>

示例 3.3 - 文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 文本</title>
</head>
<body><svg width="300" height="100"><text x="20" y="30" font-family="Arial" font-size="20" fill="navy">SVG 文本示例</text></svg>
</body>
</html>

示例 3.4 - 渐变与图案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 渐变与图案</title>
</head>
<body><svg width="200" height="200"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#ff0000"/><stop offset="100%" stop-color="#0000ff"/></linearGradient><pattern id="pattern1" width="20" height="20" patternUnits="userSpaceOnUse"><rect width="10" height="10" fill="#00ff00"/></pattern></defs><rect x="10" y="10" width="100" height="100" fill="url(#grad1)"/><circle cx="150" cy="150" r="30" fill="url(#pattern1)"/></svg>
</body>
</html>

示例 3.5 - 滤镜效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 滤镜</title>
</head>
<body><svg width="200" height="200"><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/></filter><filter id="shadow"><feDropShadow dx="5" dy="5" stdDeviation="3" flood-color="rgba(0,0,0,0.5)"/></filter></defs><rect x="20" y="20" width="100" height="100" fill="teal" filter="url(#shadow)"/><circle cx="150" cy="150" r="30" fill="red" filter="url(#blur)"/></svg>
</body>
</html>

示例 3.6 - 动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 动画</title><style>.pulse {animation: pulse 1s infinite;}@keyframes pulse {0% { r: 10; }50% { r: 20; }100% { r: 10; }}</style>
</head>
<body><!-- SMIL 动画（部分浏览器已弃用） --><svg width="200" height="200"><circle cx="50" cy="50" r="20" fill="blue"><animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite"/></circle></svg><!-- CSS 动画 --><svg width="200" height="200"><circle class="pulse" cx="100" cy="100" r="10" fill="green"/></svg>
</body>
</html>

示例 3.7 - 交互性（JavaScript）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 交互</title>
</head>
<body><svg width="200" height="200"><rect id="btn" x="50" y="50" width="100" height="50" fill="gray"/><script>document.getElementById('btn').addEventListener('click', function() {this.setAttribute('fill', '#' + Math.floor(Math.random()*16777215).toString(16));});</script></svg>
</body>
</html>

示例 3.8 - 视口与 viewBox

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

示例 3.9 - 复用元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 复用元素</title>
</head>
<body><svg width="300" height="100"><defs><symbol id="icon" viewBox="0 0 24 24"><path d="M12 2L3 9v12h18V9l-9-7z"/></symbol></defs><use href="#icon" x="10" y="10" width="30" height="30" fill="purple"/><use href="#icon" x="100" y="10" width="30" height="30" fill="pink"/></svg>
</body>
</html>

4.SVG 中常见图形元素的属性总结

1. 矩形 `<rect>`

属性列表：

属性	含义	示例值
`x`	矩形左上角的 x 坐标	`"10"`
`y`	矩形左上角的 y 坐标	`"10"`
`width`	矩形的宽度	`"50"`
`height`	矩形的高度	`"30"`
`rx`	圆角矩形的水平圆角半径（可选）	`"5"`
`ry`	圆角矩形的垂直圆角半径（可选）	`"5"`
`fill`	填充颜色	`"blue"`, `"#00FF00"`
`stroke`	边框颜色	`"black"`
`stroke-width`	边框宽度	`"2"`
`stroke-dasharray`	虚线边框样式（如 `"5,3"` 表示 5px 实线 + 3px 空白）	`"5,3"`
`opacity`	透明度（0-1）	`"0.5"`

<rect x="10" y="10" width="50" height="30" rx="5" fill="blue" stroke="black" stroke-width="2"/>

2. 圆形 `<circle>`

属性	含义	示例值
`cx`	圆心的 x 坐标	`"100"`
`cy`	圆心的 y 坐标	`"50"`
`r`	圆的半径	`"30"`
`fill`	填充颜色	`"red"`
`stroke`	边框颜色（同 `<rect>`）	`"black"`

示例：

<circle cx="100" cy="50" r="30" fill="red"/>

3. 椭圆 `<ellipse>`

属性	含义	示例值
`cx`	椭圆中心的 x 坐标	`"200"`
`cy`	椭圆中心的 y 坐标	`"50"`
`rx`	水平半径	`"40"`
`ry`	垂直半径	`"20"`
`fill`	填充颜色	`"green"`

示例：

<ellipse cx="200" cy="50" rx="40" ry="20" fill="green"/>

4. 线条 `<line>`

属性	含义	示例值
`x1`, `y1`	起点坐标	`"10"`, `"100"`
`x2`, `y2`	终点坐标	`"150"`, `"100"`
`stroke`	线条颜色（必须设置）	`"purple"`
`stroke-width`	线条宽度	`"3"`

示例：

<line x1="10" y1="100" x2="150" y2="100" stroke="purple" stroke-width="3"/>

5. 折线 `<polyline>`

属性	含义	示例值
`points`	一系列坐标点（格式：`x1,y1 x2,y2...`）	`"10,150 50,120 90,180"`
`fill`	填充颜色（通常设为 `"none"`）	`"none"`
`stroke`	线条颜色	`"orange"`

示例：

<polyline points="10,150 50,120 90,180" fill="none" stroke="orange"/>

6. 多边形 `<polygon>`

属性	含义	示例值
`points`	闭合路径的坐标点（同 `<polyline>`）	`"200,150 250,120 300,180"`
`fill`	填充颜色	`"yellow"`
`stroke`	边框颜色	`"brown"`

示例：

<polygon points="200,150 250,120 300,180" fill="yellow" stroke="brown"/>

7. 路径 `<path>`

属性	含义	示例值
`d`	路径指令（见下方说明）	`"M10 80 Q 100 10 190 80"`
`fill`	填充颜色（`"none"` 表示不填充）	`"none"`
`stroke`	路径线条颜色	`"black"`

路径指令（d 属性）：

M x,y：移动到 (x,y)
L x,y：画线到 (x,y)
Q x1,y1 x,y：二次贝塞尔曲线
Z：闭合路径

示例：

<path d="M10 80 Q 100 10 190 80 T 370 80" fill="none" stroke="black"/>

8. 文本 `<text>`

属性	含义	示例值
`x`, `y`	文本基线起点坐标	`"20"`, `"30"`
`font-family`	字体	`"Arial"`
`font-size`	字体大小	`"20"`
`fill`	文本颜色	`"navy"`
`text-anchor`	文本对齐（`start`/`middle`/`end`）	`"middle"`

示例：

<text x="20" y="30" font-family="Arial" font-size="20" fill="navy">SVG Text</text>

9.通用属性

所有图形元素均可使用以下属性：

属性	含义
`fill`	填充颜色（支持颜色名、HEX、RGB等）
`stroke`	边框颜色
`stroke-width`	边框宽度
`opacity`	整体透明度（0-1）
`transform`	变换（如 `rotate(45)`、`scale(2)`）

10.属性总结

基本图形：<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>。
高级路径：<path> 通过指令实现任意形状。
文本：<text> 支持样式和定位。
通用样式：fill, stroke, opacity 等可跨元素复用。

5.使用 SVG 绘制的移动端常见返回按钮

方案 1：直接使用 `<path>` 绘制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 返回按钮</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;}.back-button {width: 40px;height: 40px;cursor: pointer;}.back-button:hover path {fill: #007AFF; /* 悬停时变色 */}</style>
</head>
<body><!-- 返回按钮 SVG --><svg class="back-button" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"fill="#000000"  <!-- 默认黑色 -->stroke="none"/></svg>
</body>
</html>

关键点说明：

路径 (d 属性)：
- M20 11：移动到起点 (20, 11)。
- H7.83：水平画线到 x=7.83。
- l5.59-5.59：相对绘制斜线（箭头头部）。
- L12 4：绝对坐标画线到 (12, 4)。
- l-8 8 8 8：绘制箭头尾部两段线。
- 1.41-1.41：调整箭头头部细节。
- H20v-2z：闭合路径。
交互效果：
- 通过 CSS 悬停 (:hover) 改变颜色。
- cursor: pointer 表示可点击。

方案 2：使用 `<symbol>` 复用（适合多个按钮）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>SVG 复用返回按钮</title><style>body {display: flex;gap: 20px;justify-content: center;align-items: center;height: 100vh;margin: 0;}.back-button {width: 40px;height: 40px;cursor: pointer;}.back-button:hover use {fill: #FF3B30; /* 悬停红色 */}</style>
</head>
<body><!-- 定义符号 --><svg style="display: none;"><symbol id="back-arrow" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></symbol></svg><!-- 复用按钮 --><svg class="back-button"><use href="#back-arrow" fill="#000000"/></svg><svg class="back-button"><use href="#back-arrow" fill="#007AFF"/></svg>
</body>
</html>

优势：

复用性：通过 <symbol> 定义一次，多处通过 <use> 引用。
灵活样式：每个实例可独立设置颜色/大小。

方案3:其他变体（简洁箭头）

如果需要一个更简单的箭头样式，可以修改 d 属性：

<path d="M15 18l-6-6 6-6" fill="none" stroke="#000" stroke-width="2"/>

效果：← 样式的细线箭头。

6.SVG 和 Canvas 的区别

SVG 和 Canvas 是两种完全不同的网页图形技术，它们在实现方式、适用场景和性能特点上有显著差异。以下是它们的核心区别：

1. 基础概念

特性	SVG	Canvas
类型	矢量图形（基于 XML）	位图（基于 JavaScript API）
渲染方式	保留模式（Retained Mode）	立即模式（Immediate Mode）
DOM 支持	是（每个图形是 DOM 元素）	否（只是一个画布像素区）
分辨率无关	是（无限缩放不失真）	否（放大后像素化）

2. 技术细节对比

SVG

工作原理：
通过 XML 描述图形，浏览器解析后生成可操作的 DOM 节点。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/>
</svg>

特点：
- 支持 CSS 样式和动画。
- 内置事件处理（如 onclick）。
- 适合静态或交互复杂的图形（如图标、图表）。

Canvas

工作原理：
通过 JavaScript 动态绘制像素，无持久化对象。

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fill();

特点：
- 高性能，适合频繁重绘（如游戏、动态数据可视化）。
- 需要手动管理状态和重绘。
- 无内置事件系统，需通过数学计算实现交互。

3. 性能与适用场景

场景	SVG	Canvas
图形复杂度	适合少量复杂图形（如矢量图标）	适合大量简单图形（如粒子效果）
动态更新频率	低（DOM 操作成本高）	高（直接操作像素）
交互需求	内置事件支持（如点击、悬停）	需手动计算交互区域
动画	CSS/SMIL 动画或 JS 控制属性	必须通过 JS 逐帧重绘
典型应用	地图、UI 图标、可缩放图表	游戏、实时数据可视化、图像处理

4. 代码示例对比

绘制一个可点击的圆形

SVG 实现（自带事件）：

<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="red" onclick="alert('Clicked!')"/>
</svg>

Canvas 实现（需手动检测点击）：

<canvas id="canvas" width="100" height="100"></canvas>
<script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 绘制圆ctx.fillStyle = 'red';ctx.beginPath();ctx.arc(50, 50, 40, 0, Math.PI * 2);ctx.fill();// 手动检测点击canvas.addEventListener('click', (e) => {const x = e.offsetX, y = e.offsetY;const distance = Math.sqrt((x - 50) ** 2 + (y - 50) ** 2);if (distance <= 40) alert('Clicked!');});
</script>

5. 选择建议

用 SVG 如果：
- 需要矢量缩放（如响应式设计）。
- 图形需要单独交互或动画。
- 图形数量较少（避免 DOM 性能问题）。
用 Canvas 如果：
- 需要高性能渲染（如 60fps 动画）。
- 处理像素级操作（如滤镜、图像分析）。
- 图形数量极多（如上万元素的可视化）。

6. 进阶对比

高级功能	SVG	Canvas
文本渲染	完美支持（可选中、样式丰富）	基础支持（需手动处理换行等）
图像处理	有限（通过 `<image>` 标签）	强大（像素操作、WebGL 扩展）
内存占用	较高（DOM 节点开销）	较低（纯像素缓冲区）
学习曲线	简单（声明式语法）	较陡（需理解绘图 API）

7.总结

SVG 是声明式的矢量图形，适合交互复杂、需要缩放的场景。
Canvas 是命令式的位图绘制，适合高性能、动态渲染的场景。

根据项目需求混合使用两者（例如用 SVG 做 UI，Canvas 渲染背景动画）往往是最佳实践。

7.SVG兼容问题汇总

1. 浏览器兼容性问题

1.1 旧版浏览器（IE 8 及以下）

问题：
- IE 8 及更早版本完全不支持 SVG。
- IE 9-11 部分支持，但存在 Bug（如滤镜效果、CSS 动画）。
解决方案：
- 使用 Polyfill（如 SVG for Everybody）或转换为 PNG 备用。
- 通过 <img> 引入 SVG 时，添加 onerror 回退：
```
<img src="image.svg" onerror="this.src='fallback.png'" />
```

1.2 Android 4.3 及以下

问题：
- 部分 SVG 特性（如 viewport、transform）支持不完整。
解决方案：
- 避免复杂变换，使用简化 SVG 代码。

2. 功能兼容性问题

2.1 SVG 滤镜（<filter>）

问题：
- 部分浏览器（如旧版 Firefox）对 feBlend、feColorMatrix 等滤镜效果支持不完整。
解决方案：
- 使用 CSS 滤镜（如 filter: blur(5px)）作为备用。
- 测试效果并简化滤镜链。

2.2 SVG 动画

问题：
- SMIL 动画（如 <animate>）在 Chrome 45+ 已弃用，但部分浏览器仍支持。
- CSS 动画对 transform 属性的支持不一致。

解决方案：

改用 CSS 动画或 JavaScript 动画库（如 GSAP、Snap.svg）。

检测 SMIL 支持并回退：

if (!document.createElementNS('http://www.w3.org/2000/svg', 'animate').toString().includes('SVGAnimateElement')) {console.log('SMIL 不支持');
}

2.3 字体与文本

问题：
- <text> 元素在跨平台渲染时可能出现字体不一致或换行错误。
解决方案：
- 使用 textPath 或手动换行（<tspan>）。
- 将文本转换为路径（设计工具中操作）。

3. 嵌入方式的兼容性

3.1 <img> 标签引入 SVG

问题：
- 无法通过 CSS 修改 SVG 内部样式。
- 部分浏览器禁用 SVG 内联脚本。

解决方案：

改用 <object> 或内联 SVG：

<object data="image.svg" type="image/svg+xml"></object>

3.2 CSS 背景图

问题：
- 旧版 iOS Safari 可能无法正确缩放 SVG 背景。

解决方案：

显式设置 background-size：

.element {background: url('image.svg');background-size: 100% 100%;
}

4. 交互与脚本问题

4.1 事件绑定

问题：
- 动态创建的 SVG 元素在旧版 Android 中可能无法触发事件。
解决方案：
- 使用事件委托（委托到父级 SVG 或 HTML 元素）。

4.2 动态修改 SVG

问题：
- 直接修改 d 属性（如 <path>）在 IE 中可能不触发重绘。

解决方案：

强制重绘：

path.setAttribute('d', newValue);
path.style.transform = 'scale(1)'; // 触发重绘

5. 其他常见问题

5.1 尺寸与视口

问题：
- 未设置 viewBox 时，某些浏览器可能无法正确缩放 SVG。

解决方案：

始终显式定义 viewBox 和 width/height：

<svg width="100" height="100" viewBox="0 0 100 100">...</svg>

5.2 外链资源

问题：
- 外部 SVG 文件中的 <use href="external.svg#icon"> 在 Firefox 中可能受限。
解决方案：
- 使用内联 SVG 或工具链（如 Webpack）将 SVG 打包为数据 URI。

svg兼容性总结

主要问题：旧版浏览器（IE/旧移动端）、滤镜/动画支持、动态交互。

检测函数:

// Can I Use 也可以直接看
if (Modernizr.svg) {console.log('SVG 支持');
}

通用建议：
1. 优先使用内联 SVG 以最大化控制权。
2. 复杂场景提供 PNG 回退。
3. 测试目标平台的关键功能（如动画、滤镜）。

通过预处理工具（如 SVGO 优化代码）和渐进增强策略，可以显著降低 SVG 的兼容性风险。

深入 SVG：矢量图形、滤镜与动态交互开发指南

1.SVG 详细介绍 SVG（Scalable Vector Graphics） 是一种基于 XML 的矢量图形格式，用于描述二维图形。 1. 命名空间 (Namespace) 命名空间 URI：http://www.w3.org/2000/svg 用途：在 XML 或 XHTML 中区分不同标记语言的…...

编程日记 2026/2/12 23:41:26

SPPAS安装及问题汇总

SPPAS下载地址文件找不到，可能是MAC的自动化操作问题，解决方案有二： 方案一： 直接查看SPPAS中的readme，运行sppas.command 方案二： 在自动化脚本中添加 export PATH/usr/local/bin:$PATH...

编程日记 2026/2/21 18:17:35

LINUX基础 [三] - 进程创建

目录前言进程创建的初次了解（创建进程的原理） 什么是fork函数？ 初识fork函数写时拷贝 fork函数存在的意义 fork调用失败的原因进程终止运行完毕结果不正确 main函数返回库函数函数exit 系统调用接口_exit 进程异常终止进…...

编程日记 2026/2/23 18:25:48

【day1】数据结构刷题链表

一反转链表 206. 反转链表给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。示例 1： 输入：head [1,2,3,4,5] 输出：[5,4,3,2,1]示例 2： 输入：head [1,2] 输出：[2,1]…...

编程日记 2026/2/22 1:51:33

鼠标在客户区内按下左键和双击右键

书籍：《Visual C 2017从入门到精通》的2.6鼠标环境：visual studio 2022 内容：【例2.44】鼠标在客户区内按下左键和双击右键 1.创建一个单文档程序一个简单的单文档程序-CSDN博客https://blog.csdn.net/qq_20725221/article/details/1463…...

编程日记 2026/2/15 17:07:13

c++ map和vector模板类

在这一章中C语法之模板函数和模板类-CSDN博客我们学习了怎样写模板函数和模板类，接下来我们来学习系统给我们写好的两个模板类:map和vector。我相信有了上文的基础，能帮助我们更好的理解这些模板类。 map和vector 是C STL(标准模板库) 中的一部分&a…...

编程日记 2026/2/13 20:10:52

hn航空app hnairSign unidbg 整合Springboot

声明: 本文章中所有内容仅供学习交流使用，不用于其他任何目的，抓包内容、敏感网址、数据接口等均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关！ 逆向分析学习unidbg补环境。先弄一个…...

编程日记 2026/2/18 18:46:58

Arm Linux ceres库编译

由于工作需要，需在国产化系统上编译ceres库，手上有一块树莓派，就在树莓派上面进行测试编译ceres库，总体来说比较顺利。只出现了一点小问题参考链接： Ceres中文教程-安装 Ceres官方网站（英文） …...

编程日记 2026/2/14 22:37:42

c++中的四种cast转换

文章目录前言一、dynamic_cast二、static_cast三、const_cast四、reinterpret_cast总结前言 C继承并扩展C语言的传统类型转换方式，提供了功能更加强大的转型机制（检查与风险） 转换类型典型用途安全性static_cast相关类型转换（…...

编程日记 2026/2/15 0:02:12

矩阵补充，最近邻查找

矩阵补充，最近邻查找矩阵补充是向量召回最简单的一种方法，现在不常用，学习矩阵补充是为了更好的理解后面学到的双塔模型下图，输入用户ID和物品ID后从Eebedding层拿到对应的向量做内积，内积的结果就是矩阵补充模型…...

编程日记 2026/2/13 17:41:55

gradio调用多个CSS的HTML页

很多博客介绍的gradio读取html和css比较简单，如果要做很细致的前端页面优化，比如丰富的响应式的cssjs，至少要有html多个css，是暂不能实现的。bootstrap、font-awesome、jquery等方案一当然是直接更换htmlcss为主的部署方式&#…...

编程日记 2026/2/22 19:37:29

NVIDIA NeMo 全面教程：从入门到精通

NVIDIA NeMo 全面教程：从入门到精通文章目录 NVIDIA NeMo 全面教程：从入门到精通目录框架介绍NeMo的核心特点NeMo的架构NeMo与其他框架的比较NeMo的模型集合NeMo的工作流程NeMo 2.0的新特性安装指南系统要求使用Docker容器安装步骤1：安装Do…...

编程日记 2026/2/19 1:47:26

Go 语言封装邮件发送功能

Go 语言封装邮件发送功能 🏆 目标📦 依赖包🌟 项目结构🚀 代码实现🛠️ 主要方法说明🧪 单元测试🌈 使用示例🏆 代码亮点🌟 改进方向🚀 总结在现代 Web 开发…...

编程日记 2026/2/19 23:42:18

加新题了，MySQL 8.0 OCP 认证考试题库更新

MySQL 8.0 OCP 认证考试题库更新 MySQL 8.0 Database Administrator 考试科目：1Z0-908 近期发现，MySQL OCP认证考试题库发生变化，出现了很多新题，对此，CUUG专门收集整理了最新版本的MySQL考试原题，并会给…...

编程日记 2026/2/22 4:36:30

Thales靶机攻略

1.下载导入VBox，并启动靶机靶机地址：https://download.vulnhub.com/thales/Thales.zip 解压后，在VBox中导入虚拟电脑。包含所有网卡的MAC地址。导入完成，设置网卡模式为仅主机网络。开启靶机。 kali网卡更改为桥接模式。点击工…...

编程日记 2026/2/14 5:51:23

尝试使用Tauri2+Django+React项目（2）

前言尝试使用tauri2DjangoReact的项目-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146403103在前面笔者不知道怎么做，搞了半天笔者看到官网，原来可以使用二进制文件，好好好嵌入外部二进制文件 | Taurihttps://v2.taur…...

编程日记 2026/2/15 0:42:51

6.1 模拟专题：LeetCode 1576. 替换所有的问号

1. 题目链接 LeetCode 1576. 替换所有的问号 2. 题目描述给定一个仅包含小写字母和问号 ? 的字符串 s，要求将所有 ? 替换为任意小写字母，使得替换后的字符串中没有相邻的两个字符相同。示例： 输入：s "?zs" →…...

编程日记 2026/2/13 22:51:19

Linux安装go环境

安装一个lazydocker，根据文档需要先安装go环境 https://github.com/jesseduffield/lazydocker 官方文档解析 https://go.dev/doc/install 文档内容如下，一共三步 1.删除先前安装的go，解压下载的go压缩包到/usr/local目录 2.添加环境变量&…...

编程日记 2026/2/15 18:23:28

卡特兰数在数据结构上面的运用

原理 Catalan数是一个数列，其第n项表示n个不同结点可以构成的二叉排序树的数量。Catalan数的第n项公式为：  其中，是组合数，表示从2n个元素中选择n个元素的组合数。 Catalan数的原理可以通过以下方式理解&…...

编程日记 2026/2/13 9:21:34

Unity知识点快速回顾系列

Unity知识点快速回顾系列导航主要想用于快速回顾unity相关知识点，基本只讲解知识点，只有简单的示例，目前还在整理中。一、C#知识点入门、基础、核心、进阶二、Unity 知识点入门、基础、核心、进阶三、Unity 数据持久化四、Unity 知识点快…...

编程日记 2026/2/16 7:55:55

悟空crm v12安装好后出现网络错误问题（已解决）

请求网址: http://wwww.aaaa.com/gateway/adminUser/queryUserNumInfo 请求方法: POST 状态代码: 502 Bad Gateway 远程地址: 101.37.79.226:9807 引荐来源网址政策: strict-origin-when-cross-origin...

编程日记 2026/2/15 11:41:30

便携版：随时随地，高效处理 PDF 文件

PDF-XChange Editor Plus 便携版是一款功能强大且极其实用的 PDF 阅读与编辑工具。它不仅支持快速浏览 PDF 文件，还提供了丰富的编辑功能，让用户可以轻松处理 PDF 文档。经过大神优化处理，这款软件已经变得十分轻便，非常适合需要随…...

编程日记 2026/2/13 16:45:14

【Golang】补充：占位符、转义字符、错误处理

🔥 个人主页：星云爱编程 🔥 所属专栏：Golang 🌷追光的人，终会万丈光芒 🎉欢迎大家点赞👍评论📝收藏⭐文章 1、占位符 1.1通用占位符 %v ：默认格式的值。适…...

编程日记 2026/2/17 8:59:49

9.末尾点删除处理缺陷给出源码： $file_name trim($_FILES[upload_file][name]); $file_name deldot($file_name);//删除文件名末尾的点 $file_ext strrchr($file_name, .); $file_ext strtolower($file_ext); //转换为小写 $file_ext str_ireplace(::$DATA,…...

编程日记 2026/2/13 16:31:34

AI比人脑更强，因为被植入思维模型【23】损失规避思维模型

我觉得这是一个很有趣的思维模型。我们学习一个思维模型，不光是指导自己的思维，其实也可以预测或者思考别人的思维模型，也就是别人会怎么想，怎么做？ 定义三层解释思维模型是一种深入剖析事物本质的思考框架&#x…...

编程日记 2026/2/12 18:23:03

如何用Spring AI构建MCP Client-Server架构

现代 Web 应用正加速与大语言模型（LLMs）深度融合，构建超越传统问答场景的智能解决方案。为突破模型知识边界，增强上下文理解能力，开发者普遍采用多源数据集成策略，将 LLM 与搜索引擎、数据库、文件系统等外部资源互联。然而，异构数据源的协议差异与格式壁垒，往往导致集…...

编程日记 2026/2/15 0:37:04

如何让WordPress不同的页面、栏目显示不同的小工具侧边栏

WooSidebars 是一款用于 WordPress 的插件，主要功能是允许用户根据不同的上下文条件（如特定页面、博客文章、分类目录或搜索结果页面等）来更改侧边栏中显示的小工具。自定义小工具区域：用户可以轻松创建自定义的小工具区域，并将其设置为在多种条件下显示，只需点击几次即…...

编程日记 2026/2/15 17:30:21

智慧座椅的节能效果如何？

嘿呀，你知道不，咱这叁仟智慧座椅的节能效果，那可是像个神秘小宇宙，根据不同的技术和应用场景，会展现出超有趣的变化哦，下面就给你唠唠常见的几种情况哈！ 能源回收大变身：有些叁仟智…...

编程日记 2026/2/14 0:52:47

Matlab:二维绘图篇——不同坐标系下的绘图命令

目录 1.极坐标系下绘图：polar命令实例——极坐标图形实例——直角坐标与极坐标系图形 2.半对数坐标系下绘图：semilogx和semilogy 实例——半对数坐标系图形 3.双对数坐标系下绘图：loglog 实例——双对数坐标系绘图 4.双y轴坐标&…...

编程日记 2026/2/13 13:40:27

HTTP 协议中请求与响应的详细解析

前言：HTTP（Hypertext Transfer Protocol，超文本传输协议）是用于在互联网上传输超文本的协议 --由一个请求和响应组成，一个完整的 HTTP 请求由请求行（Request Line）、请求头（Headers&…...

编程日记 2026/2/15 17:03:54

1.SVG 详细介绍

2. SVG API

3. 常用 SVG 代码示例

示例 3.1 - 基本形状

示例 3.2 - 路径（Path）

示例 3.3 - 文本

示例 3.4 - 渐变与图案

示例 3.5 - 滤镜效果

示例 3.6 - 动画

示例 3.7 - 交互性（JavaScript）

示例 3.8 - 视口与 viewBox

示例 3.9 - 复用元素

4.SVG 中常见图形元素的属性总结

1. 矩形 <rect>

2. 圆形 <circle>

3. 椭圆 <ellipse>

4. 线条 <line>

5. 折线 <polyline>

6. 多边形 <polygon>

7. 路径 <path>

8. 文本 <text>

9.通用属性

10.属性总结

5.使用 SVG 绘制的移动端常见返回按钮

方案 1：直接使用 <path> 绘制

方案 2：使用 <symbol> 复用（适合多个按钮）

方案3:其他变体（简洁箭头）

6.SVG 和 Canvas 的区别

1. 基础概念

2. 技术细节对比

3. 性能与适用场景

4. 代码示例对比

5. 选择建议

6. 进阶对比

7.总结

7.SVG兼容问题汇总

1. 浏览器兼容性问题

2. 功能兼容性问题

3. 嵌入方式的兼容性

4. 交互与脚本问题

5. 其他常见问题

svg兼容性总结

相关文章：

1. 矩形 `<rect>`

2. 圆形 `<circle>`

3. 椭圆 `<ellipse>`

4. 线条 `<line>`

5. 折线 `<polyline>`

6. 多边形 `<polygon>`

7. 路径 `<path>`

8. 文本 `<text>`

方案 1：直接使用 `<path>` 绘制

方案 2：使用 `<symbol>` 复用（适合多个按钮）