当前位置: 首页 > news >正文

SVG 知识详解:从入门到精通

SVG 知识详解:从入门到精通

作为一名前端开发者,我经常会被SVG的魅力所折服。这种基于XML的矢量图形格式,不仅能完美适配各种屏幕分辨率,还能通过CSS和JavaScript进行灵活控制。今天,就让我们一起来深入探索SVG的世界。

一、SVG是什么?

SVG(Scalable Vector Graphics)是一种用XML描述二维图形的矢量图形格式。与位图不同,SVG图形由数学公式定义,因此可以无限放大而不失真。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

上面这段简单的代码就能绘制一个黄色的圆,是不是很神奇?

二、SVG基础图形

SVG提供了多种基础图形元素:

  1. 矩形 <rect>
<rect x="10" y="10" width="80" height="80" fill="blue" />
  1. 圆形 <circle>
<circle cx="50" cy="50" r="40" fill="red" />
  1. 椭圆 <ellipse>
<ellipse cx="50" cy="50" rx="40" ry="30" fill="green" />
  1. 线条 <line>
<line x1="10" y1="10" x2="90" y2="90" stroke="black" />
  1. 多边形 <polygon>
<polygon points="50,5 90,90 10,90" fill="purple" />
  1. 折线 <polyline>
<polyline points="10,10 40,40 10,70 40,100" fill="none" stroke="orange" />

三、SVG路径

<path>元素是SVG中最强大的图形元素,可以绘制任意形状。它使用d属性定义路径数据:

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="black" />

路径命令包括:

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

四、SVG文本

SVG可以完美呈现文本:

<text x="10" y="50" font-family="Arial" font-size="20" fill="red">Hello SVG World!
</text>

五、SVG样式

SVG支持多种样式设置方式:

  1. 内联样式
<rect x="10" y="10" width="80" height="80" style="fill:blue;stroke:pink;stroke-width:5" />
  1. CSS样式
<style>.myRect {fill: blue;stroke: pink;stroke-width: 5;}
</style><rect x="10" y="10" width="80" height="80" class="myRect" />
  1. 属性样式
<rect x="10" y="10" width="80" height="80" fill="blue" stroke="pink" stroke-width="5" />

六、SVG动画

SVG支持多种动画效果:

  1. CSS动画
<style>@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}.spinner {animation: rotate 2s linear infinite;}
</style><rect x="25" y="25" width="50" height="50" class="spinner" fill="blue" />
  1. SMIL动画
<circle cx="50" cy="50" r="20" fill="red"><animate attributeName="cx" from="50" to="450" dur="5s" repeatCount="indefinite" />
</circle>
  1. JavaScript动画
const circle = document.querySelector(circle);
let angle = 0;function animate() {angle += 0.02;circle.setAttribute(cx, 50 + Math.sin(angle) * 40);circle.setAttribute(cy, 50 + Math.cos(angle) * 40);requestAnimationFrame(animate);
}animate();

七、SVG滤镜

SVG滤镜可以创建各种视觉效果:

<defs><filter id="blur" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter>
</defs><rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />

八、SVG实际应用

  1. 图标系统
<svg class="icon"><use xlink:href="#icon-home"></use>
</svg>
  1. 数据可视化
// 使用D3.js创建SVG图表
const data = [10, 20, 30, 40, 50];d3.select(svg).selectAll(rect).data(data).enter().append(rect).attr(x, (d, i) => i * 30).attr(y, d => 100 - d).attr(width, 25).attr(height, d => d).attr(fill, steelblue);
  1. 交互式图形
const svg = document.querySelector(svg);svg.addEventListener(mousemove, (e) => {const rect = svg.getBoundingClientRect();const x = e.clientX - rect.left;const y = e.clientY - rect.top;document.querySelector(circle).setAttribute(cx, x);document.querySelector(circle).setAttribute(cy, y);
});

九、SVG优化技巧

  1. 使用SVGO工具优化SVG文件
  2. 尽量复用元素(使用<defs><use>
  3. 简化路径数据
  4. 使用CSS控制样式
  5. 考虑使用SVG精灵图

十、总结

SVG作为现代Web开发中不可或缺的技术,为我们提供了强大的图形处理能力。从简单的图标到复杂的数据可视化,SVG都能完美胜任。希望通过本文,你能对SVG有一个全面的了解,并在实际项目中灵活运用。

记住,SVG的学习是一个渐进的过程,多动手实践,你会发现它的无限可能!

相关文章:

SVG 知识详解:从入门到精通

SVG 知识详解&#xff1a;从入门到精通 作为一名前端开发者&#xff0c;我经常会被SVG的魅力所折服。这种基于XML的矢量图形格式&#xff0c;不仅能完美适配各种屏幕分辨率&#xff0c;还能通过CSS和JavaScript进行灵活控制。今天&#xff0c;就让我们一起来深入探索SVG的世界…...

编译openssl源码

openssl版本 1.1.1c windows 安装环境 perl 先安装perl&#xff0c;生成makefile需要 https://strawberryperl.com/releases.html nasm nasm 也是生成makefile需要 https://www.nasm.us/ 安装完perl输入一下nasm&#xff0c;看看能不能找到&#xff0c;找不到的话需要配…...

土壤温湿盐分传感器用于节水农业灌溉引领者三针设计原理便于安装维护

土壤温度部分是由精密铂电阻和高精度变送器两部分组成。变送器部分由电源模块、温度传感模块、变送模块、温度补偿模块及数据处理模块等组成&#xff0c;彻底解决铂电阻因自身特点导入的测量误差&#xff0c;变送器内有零漂电路和温度补偿电路&#xff0c;对使用环境有较高的适…...

Kotlin Compose 与传统 Android UI 开发对比

在移动应用开发领域,Android 开发一直是技术演进的前沿阵地,而 UI 开发作为用户与应用交互的核心环节,其技术体系的变革更是备受瞩目。 技术演进背景 Android UI 开发体系发展脉络 原生 View 体系阶段 在早期的 Android 开发中,原生 View 体系占据了主导地位。开发者通…...

docker-compose——安装redis

文章目录 一、编写docker-compose.yaml文件二、编写redis.conf文件三、启动docker-compose 一、编写docker-compose.yaml文件 version: 3.3 services:redis:image: redis:latestcontainer_name: redisrestart: alwaysports:- 6379:6379volumes:- ./redis/data:/data- ./redis/…...

MFC 调用海康相机进行软触发

初始化相机类文件 #pragma once #include "MvCameraControl.h" class CMvCamera { public:CMvCamera();~CMvCamera();//初始化相机int InitCamera();int SaveCurrentImage(CString filePath);//关闭相机void CloseCamera();//设置int SetEnumValue(IN const char* s…...

第二章 变量和运算符

主要内容 关键字和标识符变量和常量八大基本数据类型Scanner键盘输入基本数据类型的类型转换算术运算符赋值运算符扩展赋值运算符比较运算符逻辑运算符三目运算符运算符的优先级别 学习目标 知识点要求关键字和标识符理解变量和常量掌握八大基本数据类型掌握Scanner键盘输入…...

【starrocks】StarRocks 常见 HTTP 操作与导入错误排查指南

文章目录 一、Stream Load&#xff1a;通过 HTTP 导入数据二、导入状态查询三、取消导入任务四、节点状态监控查看所有 Backend 状态&#xff1a;查看所有 Frontend 状态&#xff1a; 五、导入失败的排查方式1. 查询导入任务状态2. 下载详细错误日志3. 查看 FE/BE 节点日志FE 日…...

网络协议分析 实验七 FTP、HTTP、DHCP

文章目录 实验7.1 FTP协议练习二 使用浏览器登入FTP练习三 在窗口模式下&#xff0c;上传/下传数据文件实验7.2 HTTP(Hyper Text Transfer Protocol)练习二 页面提交练习三 访问比较复杂的主页实验7.3 DHCP(Dynamic Host Configuration Protocol) 实验7.1 FTP协议 dir LIST&…...

ET ProcessInnerSender类(实体) 分析

ProcessInnerSender 作用是进程内部发送Actor消息 字段 TIMEOUT_TIME 超时时间RpcId 用来累加requestCallback 存储RPC的回调事件list 用来获取MessageQueue中的Actor消息 方法 Awake 初始化在MessageQueue中注册待处理的消息队列Destroy 移除在MessageQueue中的消息队列U…...

远程连接工具

绿色轻便ToDesk https://www.todesk.com/download.html 向日葵 https://sunlogin.oray.com/download...

MySQL库级管理:数据库管理与存储引擎剖析

引言 各位数据库爱好者们好&#xff01;今天我们要深入探讨MySQL数据库的基本操作&#xff0c;这是每位开发者必须掌握的"内功心法" &#x1f4aa;。无论你是刚接触MySQL的小白&#xff0c;还是需要复习基础的老手&#xff0c;这篇教程都将带你系统学习数据库的核心…...

MongoDB 的核心概念(文档、集合、数据库、BSON)是什么?

MongoDB 是一个面向文档的数据库&#xff0c;它的核心概念与传统的关系型数据库&#xff08;RDBMS&#xff09;有所不同。以下是它的四个主要核心概念&#xff1a; 文档 (Document) 定义&#xff1a; 文档是 MongoDB 中的基本数据单元。它类似于关系型数据库中的一行记录&#…...

占位符读取标准输入缓冲区规则

1、如果标准输入缓冲区中的前若干个字符都是空白字符&#xff0c;%s&#xff0c;%d&#xff0c;%f都能直接跳过并且从第一个非空白字符开始读取&#xff0c;但%c不能&#xff0c;而是直接读取。 2、%s遇到空白字符时停止&#xff0c;不会读取遇到的空白字符。 3、%d遇到非数字…...

使用Docker部署MongoDB

使用Docker部署MongoDB 使用Docker部署MongoDB是一种快速、便捷的方式&#xff0c;以下是详细步骤&#xff1a; 1. 基本部署 拉取MongoDB镜像 docker pull mongo:latest运行MongoDB容器&#xff08;最简单方式&#xff09; docker run --name mongodb -d -p 27017:27017 m…...

如何通过命令提示符(CMD)检查虚拟化是否已启用

想确认 Windows 11 或 10 电脑或笔记本上的虚拟化是否已启用,可以使用命令提示符或 PowerShell 中的 systeminfo 命令。之前已经介绍过使用图形界面的检查方法。在大多数现代系统中,虚拟化默认在 BIOS 中启用,但我们无需打开 BIOS/UEFI 固件菜单即可确认这一点。 虚拟化是一…...

【氮化镓】AlGaN合金中成分相关的辐射响应

2025年,美国宾夕法尼亚州立大学Miaomiao Jin等人基于分子动力学模拟方法,研究了AlGaN合金中成分依赖的辐射响应。研究结果表明,AlGaN合金的辐射损伤特性与铝含量密切相关:随铝含量增加,单次碰撞事件产生的缺陷减少,但由于累积效应,富铝系统更易形成扩展间隙缺陷簇,导致…...

『 测试 』软件测试全流程与Bug管理核心要点解析

文章目录 1 软件测试生命周期2 Bug2.1 Bug 的概念2.2 提出清晰的 Bug2.3 Bug 级别2.4 Bug 的生命周期2.5 作为测试人员与开发人员发生冲突怎么办 1 软件测试生命周期 软件测试贯穿于软件的整个生命周期; 需求分析 测试前需要对需求进行分析, 分析通常站在三个角度去考虑, 即用…...

【springcloud学习(dalston.sr1)】使用Feign实现接口调用(八)

该系列项目整体介绍及源代码请参照前面写的一篇文章【springcloud学习(dalston.sr1)】项目整体介绍&#xff08;含源代码&#xff09;&#xff08;一&#xff09; &#xff08;一&#xff09;Feign的理解 前面文章【springcloud学习(dalston.sr1)】服务消费者通过restTemplat…...

嵌入式Linux Qt开发:2、Qt creator简单配置、Qt Designer使用以及信号槽机制使用

一、前言 Qt creator比较轻量&#xff0c;而且是Qt自带的IDE&#xff0c;基本可以开箱即用&#xff0c;个人使用起来感觉还是比较舒服的&#xff0c;并且其自带的FakeVim也可以做一些Vim的配置&#xff0c;其主界面可以简单配置显示很多的窗口&#xff0c;让开发更加顺畅。 Q…...

【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误

在使用 Vue 3 和 Vue Router 4 开发中大型 SPA 应用时&#xff0c;我们经常会遇到需要动态添加或删除路由的场景。尤其是在权限控制和用户登出后重置路由的需求中&#xff0c;正确地实现 resetRouter 非常关键。 然而&#xff0c;许多开发者在迁移或初始化项目时&#xff0c;会…...

企业内部通讯,企业级即时通讯软件选择

企业内部的沟通往往涉及大量敏感信息&#xff0c;如商业机密、财务数据、客户信息等。BeeWorks IM即时通讯平台采用全私有化部署&#xff0c;企业可以将服务器部署在自己的数据中心或私有云环境中&#xff0c;确保所有数据的存储和传输都在企业可控的网络内完成。这种部署方式从…...

300. 最长递增子序列

理解最长递增子序列&#xff08;LIS&#xff09;是解决该问题的关键。子序列是从给定数组中按顺序选取的元素序列&#xff0c;例如数组 [1, 2, 3, 4, 5] 的子序列可以是 [2, 3, 4]。需要注意的是&#xff0c;子序列的元素在原数组中不一定是连续的。因此&#xff0c;最长递增子…...

MongoDB入门

1.MongoDB 基本概念详解 2.MongoDB 快速实战 3.MongoDB 核心操作与原理详解 Mongo 是 humongous 的中间部分&#xff0c;在英文里是“巨大无比”的意思。所以 MongoDB 可以翻译 成“巨大无比的数据库”&#xff0c;更优雅的叫法是“海量数据库”。Mongodb是一款非关系型数据库…...

MySQL基础原理

目录 一、MySQL架构 1、四层架构 2、MySQL运行机制 二、MySQL存储引擎 1、不同存储引擎对比 2、InnoDB存储结构 2.1 内存结构 2.2 磁盘结构 3、日志先行策略 3.1 核心思想 3.2 关键组件与流程 3.3 数据安全保证 3.3.1 崩溃恢复 3.3.2 持久性保障 一、MySQL架构 …...

Python刷题练习

文章目录 1.寻找相同字串2.密钥格式化3.五键键盘的输出4.单词重量5.输出指定字母在字符串的中的索引6.污染水域7.九宫格按键输入8.任务最优调度9.高效的任务规划 1.寻找相同字串 题目描述: 给你两个字符串t和p&#xff0c;要求从t中找到一个和p相同的连续子串&#xff0c;并输…...

基于GPUGEEK 平台进行深度学习

一、平台简介 GPUGEEK 是一个专注于提供 GPU 算力租赁服务的平台&#xff0c;在人工智能与深度学习领域为用户搭建起便捷的算力桥梁。它整合了丰富多样的 GPU 资源&#xff0c;涵盖 RTX - 4090、RTX - 3090、A100 - PCIE 等多种型号&#xff0c;满足不同用户在模型训练、数据处…...

基于Matlab的非线性Newmark法用于计算结构动力响应

基于Matlab的非线性Newmark法用于计算结构动力响应&#xff0c;主要针对材料非线性或几何非线性问题。 ​1. Newmark法基本原理​ Newmark法是一种隐式时间积分方法&#xff0c;通过预估-校正步骤更新位移、速度和加速度&#xff1a; ​预测步​&#xff1a; un1​un​Δtvn​…...

Oracle — PL-SQL

介绍 Oracle PL/SQL是专为Oracle数据库设计的过程化编程语言&#xff0c;深度融合SQL语句与结构化编程逻辑&#xff0c;旨在高效处理复杂数据操作与业务规则。其核心特征为“块结构”&#xff0c;程序由声明、执行、异常处理三部分组成&#xff0c;支持模块化开发&#xff0c;显…...

第七节第二部分:接口的综合案例

案例分析 代码&#xff1a; Student类 package com.Interface_Demo;public class Student {private String name;private char sex;private double score;public Student() {}public Student(String name, char sex, double score) {this.name name;this.sex sex;this.scor…...

【AI古风美学渲染】:淡雅光影中的细腻呈现

“顶作AI”作为国内首个深度融合中文语义的生成式AI平台&#xff0c;以近百亿级参数的Lens跨模态模型为核心&#xff0c;开创了“自然语言即生产力”的创作模式。该平台突破传统工具对专业术语的依赖&#xff0c;用户仅需输入如“水墨风格的山间庭院&#xff0c;晨雾中若隐若现…...

JVM学习专题(二)内存模型深度剖析

目录 1.JVM结构体系 ​编辑 2.跨平台特性 3.JVM整体结构及内存模型 1.栈内存 1、栈帧&#xff1a; 1.局部变量表 2.操作数栈 3.动态链接 4.方法出口 2、创建对象 2.程序计数器&#xff1a; 3.方法区 ​4.堆 5.本地方法区 6.总结 1.JVM结构体系 JDK、JRE 和 JVM…...

Prometheus 的介绍与部署(入门)

一、什么是Prometheus&#xff1b; 1.介绍 Prometheus 是一个功能强大的监控工具&#xff0c;适用于各种环境。通过简单的安装和配置&#xff0c;可以快速实现对系统和服务的监控。无论是单机环境、容器化环境还是 Kubernetes 集群&#xff0c;Prometheus 都能提供灵活…...

JavaSwing之-JDialog

JavaSwing之-JDialog JDialog 是 Java Swing 中用于创建对话框窗口的容器类&#xff0c;继承自 Dialog 类&#xff08;AWT&#xff09;&#xff0c;常用于显示临时信息、获取用户输入或执行模态操作。它是 javax.swing.JDialog 包中的类。 与 JFrame 不同的是&#xff0c;JDia…...

配置Nginx解决http host头攻击漏洞【详细步骤】

前言 大概内容&#xff1a; 安全系统渗透测试出host头攻击漏洞&#xff0c;下面是解决步骤&#xff0c;本人已测过无问题。 server_name aaabbb.com; if ($http_Host !~* ^127.0.0.1|aaabbb.com|localhost$){return 403;}...

如何用Redis实现分布式锁?RedLock算法的核心思想?Redisson的看门狗机制原理?

一、Redis分布式锁基础实现 public class RedisDistributedLock {private JedisPool jedisPool;private String lockKey;private String clientId;private int expireTime 30; // 默认30秒public boolean tryLock() {try (Jedis jedis jedisPool.getResource()) {// NX表示不…...

LeetCode 热题 100 35.搜索插入位置

目录 题目&#xff1a; 题目描述&#xff1a; 题目链接&#xff1a; 思路&#xff1a; 核心思路&#xff1a; 思路详解&#xff1a; 代码&#xff1a; Java代码&#xff1a; 题目&#xff1a; 题目描述&#xff1a; 题目链接&#xff1a; 35. 搜索插入位置 - 力扣&…...

电流检测放大器的优质选择XBLW-INA180/INA181

前言&#xff1a; 在当前复杂的国际贸易环境下&#xff0c;关税的增加使得电子元器件的采购成本不断攀升&#xff0c;电子制造企业面临着巨大的成本压力。为了有效应对这一挑战&#xff0c;实现国产化替代已成为众多企业降低生产成本、保障供应链稳定的关键战略。对此芯伯乐推出…...

序列化和反序列化:从理论到实践的全方位指南

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…...

Leetcode (力扣)做题记录 hot100(62,64,287,108)

力扣第62题&#xff1a;不同路径 62. 不同路径 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int uniquePaths(int m, int n) {int[][] array new int[m][n];for(int i 0;i<n;i){array[0][i] 1;}for(int i 0;i<m;i){array[i][0] 1;}for(int i …...

【Linux】shell内置命令fg,bg和jobs

​Shell 内置命令​​ fg&#xff08;foreground 的缩写&#xff09;。它用于将​​后台挂起的任务恢复到前台运行​​。 例如&#xff1a; 假设你运行了一个耗时的 SVN 操作&#xff08;如 svn update 或 svn checkout&#xff09;。按下 CtrlZ 将该进程挂起到后台。输入 fg…...

鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp

使用 UniApp 制作动态加载的瀑布流布局 前言 最近在开发一个小程序项目时&#xff0c;遇到了需要实现瀑布流布局的需求。众所周知&#xff0c;瀑布流布局在展示不规则尺寸内容&#xff08;如图片、商品卡片等&#xff09;时非常美观和实用。但在实际开发过程中&#xff0c;我…...

通用软件项目技术报告 - 导读II

现在,我们正式进入报告的第三个主要领域:3. 领域三:核心业务逻辑与算法实现。 连接: 我们已经讨论了如何存储数据(领域一)和如何设计 API 让外部或内部服务可以访问这些数据或触发操作(领域二)。现在,我们将深入应用程序的“心脏”——实际执行业务规则、进行计算和(…...

新能源汽车三电质量护盾:蓝光三维扫描技术显身手

在绿色低碳的潮流下&#xff0c;新能源汽车行业快速发展&#xff0c;车企们纷纷加速电气化转型。由于电动汽车动力系统构造与内燃机车辆的构造有很大不同&#xff0c;制造商及其供应商必须加快工程研发设计及生产&#xff0c;而这对质量保证过程提出了新的挑战。 对于新能源汽…...

针对已训练好的YOLOv8模型的优化策略

以下是针对已训练好的YOLOv8模型的优化策略&#xff0c;结合模型微调、结构改进、训练策略调整等方法&#xff0c;可进一步提升检测性能或适应特定场景需求&#xff1a; 一、超参数调优 学习率动态调整 初始学习率&#xff08;lr0&#xff09;&#xff1a;若模型收敛后仍有优化…...

AI 产业化浪潮:从生成智能到星载计算,中国如何重塑全球竞争格局

2025 年的科技版图上&#xff0c;人工智能正经历着从技术奇点到产业爆点的历史性跨越。当生成式 AI 突破实验室围墙走进千行百业&#xff0c;当智能体开始在数字世界自主决策&#xff0c;当卫星搭载的大模型在太空展开计算&#xff0c;一场由技术创新驱动的产业革命正在重塑全球…...

Python如何解决中文乱码

Python文件头部声明 # -*- coding: utf-8 -*- # 必须放在文件第一行或第二行中文字符串定义方式 # Python 3 chinese_str "中文" # 默认就是Unicode# Python 2 chinese_str u"中文" # 必须加u前缀字符串编码转换黄金法则 # 解码&#xff1a;字节串 …...

android studio导入项目

如果 gradle-8.0-bin.zip 没有下载成功 可以点击进入这个网站&#xff1a;https://services.gradle.org/distributions/ 找到和自己本版相同的gradle-8.0-bin.zip文件找到自己版本进行下载; 如果下载依赖失败, 可以手动下载依赖编译过程中的jar https://repo.maven.apache.org/…...

Android Studio Meerkat与Gradle构建工具升级实战指南

简介 Android Studio Meerkat和Gradle构建工具的升级将带来显著的性能提升和开发体验优化。在Android生态快速演进的2025年,开发者亟需掌握这些新特性以提升工作效率。本指南将从零开始,详细讲解如何升级Android Studio和Gradle构建工具,配置新特性,并提供实际应用场景的代…...

TCP/IP参考模型详解:从理论架构到实战应用

一、参考模型基础概念与分类 计算机网络参考模型是为解决网络通信标准化问题而设计的逻辑框架。在众多模型中&#xff0c;TCP/IP参考模型以其高实用性和广泛应用&#xff0c;成为现代网络架构的基石。该模型采用分层设计思想&#xff0c;将复杂的网络通信功能划分为多个层次&am…...