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

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>

关键点说明：

  1. 路径 (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：闭合路径。

  2. 交互效果：

    • 通过 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. 基础概念

特性SVGCanvas
类型矢量图形（基于 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. 性能与适用场景

场景SVGCanvas
图形复杂度适合少量复杂图形（如矢量图标）适合大量简单图形（如粒子效果）
动态更新频率低（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. 进阶对比

高级功能SVGCanvas
文本渲染完美支持（可选中、样式丰富）基础支持（需手动处理换行等）
图像处理有限（通过 <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 的兼容性风险。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/39842.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C语言判断闰年相关问题

C语言判断闰年相关问题

一、简单闰年问题引入 写一个判断年份是否为闰年的程序? 运行结果: 二、闰年问题进阶 使用switch语句根据用户输入的年份和月份,判断该月份有多少天? 第一种写法(判断年份写在switch的case的里面): 运行结果: 第二种解法(先判断闰年): 运行结果: 三、补充 switch中的ca…
阅读更多...
基于Java的班级事务管理系统(源码+lw+部署文档+讲解)，源码可白嫖!

基于Java的班级事务管理系统(源码+lw+部署文档+讲解)，源码可白嫖!

摘要 随着世界经济信息化、全球化的到来和电子商务的飞速发展&#xff0c;推动了很多行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、畅通、高效的线上管理系统。当前的班级事务管理存在管理效率低下…
阅读更多...
javaweb后端登录功能cookie session

javaweb后端登录功能cookie session

登录功能 只需要这几个&#xff0c;用原来的返回太多用不上的信息&#xff0c;新写一个类只返回登录的结果 Ctrli 实现service的方法 和mapper相关的起名不用和业务一样 登录校验 登录校验思路 会话技术 cookie 创建cookie对象&#xff0c;响应给浏览器 服务端设置的…
阅读更多...
《可爱风格 2048 游戏项目：HTML 实现全解析》

《可爱风格 2048 游戏项目：HTML 实现全解析》

一、引言 在如今的数字化时代&#xff0c;小游戏以其简单易上手、趣味性强的特点深受大家喜爱。2048 游戏作为一款经典的数字合并游戏&#xff0c;拥有庞大的玩家群体。本文将详细介绍一个用单文件 HTML 实现的可爱风格 2048 游戏项目&#xff0c;它不仅具备传统 2048 游戏的基…
阅读更多...
UART转APB模块ModelSim仿真

UART转APB模块ModelSim仿真

一、简介 之前介绍过一个UART转AHB模块&#xff0c;这个代码的框架有个好处&#xff0c;就是FPGA内总线接口比较容易修改成其他总线接口。下图是UART转AHB模块中子模块uart_ahb_mst的框图&#xff0c;主要有三个状态机&#xff1a; &#xff08;1&#xff09; UART_RX_FSM将接收…
阅读更多...
ReAct: Synergizing Reasoning and Acting in Language Models

ReAct: Synergizing Reasoning and Acting in Language Models

https://zhuanlan.zhihu.com/p/624003116https://zhuanlan.zhihu.com/p/624003116https://github.com/apssouza22/ai-agent-react-llm/tree/main
阅读更多...
尝试在软考62天前开始成为软件设计师-信息系统安全

尝试在软考62天前开始成为软件设计师-信息系统安全

安全属性 保密性:最小授权原则(能干活的最小权限)、防暴露(隐藏)、信息加密、物理保密完整性(防篡改):安全协议、校验码、密码校验、数字签名、公证 可用性:综合保障( IP过滤、业务流控制、路由选择控制、审计跟踪)不可抵赖性:数字签名 对称加密 DES :替换移位 3重DESAESR…
阅读更多...
IPv4向IPv6过渡

IPv4向IPv6过渡

主要有三种过渡技术 隧道技术&#xff1a;用于解决IPv6节点之间通过IPv4网络进行通信的问题协议翻译技术&#xff1a;使纯ipv6节点与纯Ipv4节点之间进行通信双协议栈技术&#xff1a;使ipv4与ipv6可以共存于同一台设备和同一个网络中 隧道技术 把ipv6分组封装到Ipv4分组中&a…
阅读更多...
算法题（107）：function

算法题（107）：function

审题&#xff1a; 本题需要我们根据题目写出递归函数&#xff0c;并返回递归结果 时间复杂度&#xff1a;本题的数据范围虽然很大&#xff0c;但是由于条件2的限制&#xff0c;数据量可以看成是20&#xff0c;于是我们就可以使用递归函数了 思路&#xff1a; 方法一&#xff1a…
阅读更多...
【江协科技STM32】BKP备寄存器RTC实时时钟（学习笔记）

【江协科技STM32】BKP备寄存器RTC实时时钟（学习笔记）

BKP备寄存器 BKP简介 BKP&#xff08;Backup Registers&#xff09;备份寄存器BKP可用于存储用户应用程序数据。当VDD&#xff08;2.0~3.6V&#xff09;电源被切断&#xff0c;他们仍然由VBAT&#xff08;1.8~3.6V&#xff09;维持供电。当系统在待机模式下被唤醒&#xff0…
阅读更多...
leetcode 之（移除元素）

leetcode 之（移除元素）

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k&#xff0c;要通过此题&#xff0c;您需要执行以下操作&#xff1a; 更改…
阅读更多...
Spring MVC 请求与响应

Spring MVC 请求与响应

目录 一、Spring MVC 请求 1.1 请求映射核心注解&#xff1a;RequestMapping 1.1.1 作用范围 1.1.2 属性详解 1.2 请求参数绑定机制 1.2.1 绑定规则 1.2.2 特殊场景处理 二、Spring MVC 响应 2.1 视图返回机制 2.1.1 String类型返回 2.1.2 ModelAndView对象 2.2 JS…
阅读更多...
spring-security原理与应用系列：核心过滤器

spring-security原理与应用系列：核心过滤器

目录 运行机制 WebSecurity SecurityFilterChain SecurityFilterChains FilterChainProxy VirtualFilterChain 内部结构 类图 FilterChainProxy FilterChain VirtualFilterChain 小结 紧接上一篇文章&#xff0c;这一篇我们来看看FilterChainProxy类的运行机制及内…
阅读更多...
Android之卡片式滑动

Android之卡片式滑动

文章目录 前言一、效果图二、实现步骤1.主界面xml2.自定义的viewpage3.卡片接口类4.阴影和缩放变化类5.卡片adapter6.卡片adapter的xml7.style8.CardItem9.activity实现10.指示器drawable 总结 前言 对于这个需求&#xff0c;之前的项目也有做过&#xff0c;但是过于赶项目就没…
阅读更多...
字典树与01trie

字典树与01trie

字典树简介 当我们通过字典查一个字或单词的时候&#xff0c;我们会通过前缀或关键字的来快速定位一个字的位置&#xff0c;进行快速查找。 字典树就是类似字典中索引表的一种数据结构&#xff0c;能够帮助我们快速定位一个字符串的位置。 字典树是一种存储字符串的数据结构…
阅读更多...
基于SpringBoot的电影售票系统

基于SpringBoot的电影售票系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…
阅读更多...
R语言机器学习算法实战系列（二十二）特征选择之递归特征消除(REF)算法

R语言机器学习算法实战系列（二十二）特征选择之递归特征消除(REF)算法

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍原理步骤教程数据下载加载R包导入数据数据预处理数据分割Recursive Feature Elimination运行RFE过程选择重要特征基于重要特征构建随机森林模型混淆矩阵评估模型AUC曲线刻画模型在训…
阅读更多...
日事清甘特图制作工具：一键生成，精准管理项目周期

日事清甘特图制作工具：一键生成，精准管理项目周期

在工作中&#xff0c;我们很多岗位都经常需要对项目进度进行追踪&#xff0c; 例如人事经理需要要追踪招聘进度或员工培训计划&#xff0c;项目经理负责监督项目的各个阶段以保证按计划执行&#xff0c;软件研发经理则需确保功能迭代的及时交付&#xff0c;而市场经理负责监控…
阅读更多...
vue 加载动态效果，自行封装组件

vue 加载动态效果，自行封装组件

背景&#xff1a; 在项目开发中&#xff0c;会请求接口&#xff0c;就会遇到加载中、加载成功、加载失败、和加载成功但暂无数据等情况。就自行封装了一个加载组件。采用vue3elementsetup组合式写法。 实现效果&#xff1a; 封装组件&#xff1a; //封装组件 <template>…
阅读更多...
SQLark SQL编辑器秘籍，编写高效SQL查询

SQLark SQL编辑器秘籍，编写高效SQL查询

SQLark 是一款功能强大的数据库开发和管理工具&#xff0c;用于快速查询、创建和管理不同类型的数据库系统&#xff0c;支持达梦、Oracle 和 MySQL 数据库。SQLark内置的 SQL 编辑器&#xff0c;基于语法解析&#xff0c;集成智能提示、实时语法检查及语法高亮等功能&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023