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

HTML的svg元素

article 2026/1/30 7:44:15

<svg>元素

<svg>是一种用于描述二维矢量图形的 XML 格式，可以直接嵌入 HTML 文档中。

<svg>基本用法
<svg>的几种基本用法,包括圆形，正方形，三角形，直线 ，折线等

<body><svg width="180" height="100"><!-- 圆 --><circle cx="50" cy="50" r="40" storke-width="4" fill="yellow" /></svg><svg width="180" height="100"><!-- 正方形 --><rect x="10" y="10" width="80" height="80" fill="blue" /></svg><svg width="180" height="100"><!-- 椭圆 --><ellipse cx="50" cy="50" rx="30" ry="20" fill="green" /></svg><svg width="180" height="100"><!-- 直线 --><line x1="10" y1="10" x2="90" y2="90" stroke="black" /></svg><svg width="180" height="100"><!-- 三角形 --><polygon points="50,10 90,90 10,90" fill="purple" /></svg><svg width="300" height="200"><!-- 星型 --><polygon points="100,10,40,198,190,78,10,78,160,198"style="fill: lime; stroke: plum; stroke-width: 5; fill-rule: evenodd;"/></svg><svg width="180" height="100"><!-- 折线 --><polyline points="10,10 30,30 50,10 70,30 90,10" fill="none" stroke="black" /></svg>
</body>

<svg>也可以使用CSS属性

<svg width="100" height="100"><style>circle {fill: red;stroke: black;stroke-width: 3;}</style><circle cx="50" cy="50" r="40" /></svg>

<svg>高级特性
<svg>渐变

<svg width="180" height="100"><!-- 渐变 --><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"><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" /></linearGradient></defs><rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
</svg>

<svg>滤镜

<svg width="180" height="100"><!-- 滤镜 --><defs><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blur)" />
</svg>

<svg>动画

 <svg width="180" height="100"><!-- 动画 --><circle cx="50" cy="50" r="20" fill="red"><animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" /></circle>
</svg>

<svg>元素和<canvas>元素

SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式，每个图形元素都是DOM树的一部分。Canvas则是一个通过JavaScript API进行像素级绘制的位图画布，提供更底层的绘图控制。

核心技术区别
图形类型：
<svg>使用矢量图形描述，由数学方程定义形状
<canvas>生成位图图像，由像素矩阵构

DOM集成：
<svg>元素完全融入DOM，可单独操作和绑定事件
<canvas>作为整体DOM元素存在，内部图形无独立DOM表示

渲染机制：
<svg>采用保留模式渲染，自动管理图形状
<canvas>使用立即模式，开发者需手动控制绘制过程

交互能力：
<svg>原生支持图形级事件处理
<canvas>需手动实现点击检测等交互逻辑

性能特征对比

静态内容：
<svg>在渲染少量复杂图形时效率更高
<canvas>更适合处理大量动态图形元素

动画性能：
<svg>动画受DOM操作限制
<canvas>可通过清除重绘实现高效动画

内存占用：
<svg>内存消耗与图形复杂度相关
<canvas>内存占用由画布分辨率决定

适用场景分析

<svg>优势场景：
需要无限缩放的高质量图形
图形需要单独交互和样式控制
对可访问性和SEO有要求的项目

<canvas>优势场景：
数据可视化和大规模图形渲染
游戏开发和实时图像处理
需要像素级操作的应用

相关文章：

HTML的svg元素

<svg>元素 <svg>是一种用于描述二维矢量图形的 XML 格式&#xff0c;可以直接嵌入 HTML 文档中。 <svg>基本用法 <svg>的几种基本用法,包括圆形&#xff0c;正方形&#xff0c;三角形&#xff0c;直线 &#xff0c;折线等 <body><svg widt…...

编程日记 2026/1/18 4:34:18

一、简单的 Django 服务

一、配置虚拟环境 1.1 创建一个文件夹在导航栏输入cmd打开 1.2 安装依赖两个库 pip install virtualenv virtualenvwrapper-win -i https://pypi.tuna.tsinghua.edu.cn/simple验证是否安装成功 virtualenv --version pip show virtualenvwrapper-win 1.3 创建虚拟环境 mkvi…...

编程日记 2026/1/27 10:24:16

二分算法的入门笔记

二分查找 使用前提&#xff1a;有序。可理解为枚举的一种技巧。时间复杂度&#xff1a; l o g ( n ) log(n) log(n) 基础模版代码 使用时根据情景进行相应的变化。注意跳出条件and分支处理方式and返回答案&#xff0c;三者之间的配合&#xff0c;不要进入死循环。可以在模拟…...

编程日记 2025/12/10 20:39:59

k8s黑科技：Linux+Vagrant+VirtualBox开启Kubernetes奇幻之旅

文章目录 1. 准备硬件2. 安装系统3. 安装 VNC4. 基础配置4.1 路由转发4.2 防火墙4.3 selinux4.4 安装包4.5 重启 5. 配置代理6. 安装 virtuabox7. 安装 vagrant8. 配置 kubespray8.1 安装依赖工具8.2 定制 Vagrantfile8.3 配置代理与时间同步8.4 配置私有镜像仓库 9. 安装虚拟机…...

编程日记 2026/1/29 8:06:32

34% 关税冲击下 LabVIEW 开发的变局

2025 年 4 月 4 日&#xff0c;中国国务院关税税则委员会宣布&#xff0c;自 4 月 10 日起对原产于美国的所有进口商品加征 34% 关税。这一举措&#xff0c;给 LabVIEW 开发领域带来显著影响&#xff0c;相关使用者和用户亟需采取应对策略。 ​ 从成本层面看&#xff0c;LabVI…...

编程日记 2026/1/27 6:16:26

42、JavaEE高级主题：WebSocket详解

WebSocket 一、WebSocket协议与实现 WebSocket是一种基于TCP协议的全双工通信协议&#xff0c;能够在客户端和服务器之间建立实时、双向的通信通道。通过WebSocket&#xff0c;客户端和服务器可以在任何时候发送数据&#xff0c;并立即接收到对方的响应。 1.1 WebSocket协议…...

编程日记 2025/12/8 13:46:21

Http代理服务器选型与搭建

代理服务器选型-Squid 缓存加速 缓存频繁访问的网页、图片等静态资源&#xff0c;减少对原始服务器的重复请求&#xff0c;提升响应速度支持HTTP、HTTPS、FTP等协议&#xff0c;通过本地缓存直接响应客户端请求 访问控制 基于ACL&#xff08;访问控制列表&#xff09;实现精细…...

编程日记 2026/1/30 1:19:23

蓝桥杯第十一届省赛C++B组真题解析

蓝桥杯第十一届省赛CB组真题解析 八、回文日期https://www.lanqiao.cn/problems/348/learning 方法一&#xff1a;暴力枚举所有的日期&#xff0c;记录有多少个回文日期。 #include <bits/stdc.h> using namespace std; int month[13]{0,31,28,31,30,31,30,31,31,30,31…...

编程日记 2025/12/30 11:34:59

Linux主要开发工具之gcc、gdb与make

此系列还有两篇&#xff0c;大家想完整掌握可以阅读另外两篇 Linux文本编辑与shell程序设计-CSDN博客 Linux基础知识详解与命令大全&#xff08;超详细&#xff09;-CSDN博客 1.gcc编译系统 1.1 文件名后缀 文件名后缀 文 件 类 型 文件名后缀 文 件 类 型 .c C源…...

编程日记 2026/1/30 2:06:03

排序算法（快速排序，选择排序......）【泪光2929】

hello&#xff0c;大家好&#xff01;今天给大家分享一下各种排序&#xff1a; 1&#xff0c;选择排序 首先从原始数组中 选择最小的1个数据&#xff0c;将其和位于第1个位置的数据交换。接着从剩下的n-1个数据中选择次小的1个元素&#xff0c;将其和第2个位置的数据交换然后…...

编程日记 2025/11/1 23:43:35

Conda使用方法详解

Conda是一个开源的包管理和环境管理系统&#xff0c;主要用于Python/R等科学计算领域&#xff0c;可以轻松管理不同项目的依赖关系。以下是Conda的详细使用方法&#xff1a; 一、安装与配置 1.安装Miniconda/Anaconda Miniconda是精简版&#xff0c;只包含conda和Python Ana…...

编程日记 2026/1/4 5:00:17

数据库的MVCC机制详解

MVCC&#xff08;Multi-Version Concurrency Control&#xff0c;多版本并发控制&#xff09;是数据库系统中常用的并发控制机制&#xff0c;它允许数据库在同一时间点保存数据的多个版本&#xff0c;从而实现非阻塞的读操作&#xff0c;提高并发性能。 MVCC的核心思想是&…...

编程日记 2025/10/31 17:29:34

C++初阶-C++入门基础

目录 ​编辑 1.C的简介 1.1C的产生和发展 1.2C的参考文档 1.3C优势和难度 1.4C学习的建议 2.C的第一个程序 2.1打印Hello world 2.2头文件 2.3namespace命名空间 2.4&#xff1a;&#xff1a;作用域限定符 2.5namespace的延伸 2.6C的输入输出 3.总结 1.C的简介 …...

编程日记 2026/1/30 4:26:32

关于量化交易在拉盘砸盘方面应用的部分思考

关于“砸盘”的深层解析与操盘逻辑 ​​一、砸盘的本质与市场含义​​ ​​砸盘​​指通过集中抛售大量筹码导致价格快速下跌的行为&#xff0c;其核心目标是​​制造恐慌、清洗浮筹或实现利益再分配​​。不同场景下的砸盘含义不同&#xff1a; ​​主动砸盘&#xff08;操控…...

编程日记 2025/8/25 8:20:15

idea手动创建resources文件夹

有时maven没有构建成功可能造成&#xff0c;resources文件夹不创建的现象 此时我们可以手动创建 手动创建...

编程日记 2026/1/27 7:05:37

第十五届蓝桥杯大赛软件赛省赛Python 大学 C 组题目试做（中）【本期题目：回文数组，挖矿】

OK&#xff0c;继续写我们的第十五届蓝桥杯大赛软件赛省赛Python 大学 C 组题目&#xff0c;后面的题目比较麻烦了&#xff0c;所以我们再分两期讲。 这一期的题有 &#xff1a; 回文数组&#xff0c;挖矿 文章目录 回文数组基本思路第一步&#xff0c;获取半个数组每个数需要…...

编程日记 2026/1/27 9:15:03

Qt动画 QAbstractAnimation

文章目录 简介QVariantAnimation 数值动画QPropertyAnimation 属性动画 QAnimationGroup 一组动画QParallelAnimationGroup 并行动画组QSequentialAnimationGroup 串行动画组 简介 QAbstractAnimation 是所有 Qt 动画的基类。 该类定义了所有动画应该都会有的功能函数。 要想实…...

编程日记 2026/1/27 7:26:48

SpringMvc的请求-获得请求参数

客户端请求参数的格式是: namevalue&namevalue..… 服务器端要获得请求的参数&#xff0c;有时还需要进行数据的封装&#xff0c;SpringMVC可以接收如下类型的参数: 基本类型参数 POJO类型参数 数组类型参数 集合类型参数 获得基本类型参数 Controller中的业务方法…...

编程日记 2026/1/29 5:39:48

flutter开发音乐APP（前提准备）

1、项目的一些环境&#xff1a; 2、接口文档&#xff1a; 酷狗音乐 NodeJS 版 API 3、接口数据结构化 Instantly parse JSON in any language | quicktype UI样式借鉴参考&#xff1a; Coffee-Expert/Apple-Music-New-UI: Apple Music Clone on Flutter, with redesigned UI…...

编程日记 2026/1/30 4:07:30

使用docker搭建redis镜像时云服务器无法访问到国外的docker官网时如何解决

下载redis镜像 docker redis:版本号 此时截图中无法访问到国外的docker官网 解决方案&#xff1a; 通过更换镜像源来正常下载redis镜像 sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<EOF {"registry-mirrors": ["https://docker.1…...

编程日记 2026/1/30 4:07:40

双引擎驱动：解密音视频体验的QoS技术底座与QoE感官革命

QoS 定义&#xff1a;QoS&#xff08;Quality of Service&#xff0c;服务质量&#xff09;衡量音视频传输技术层面的性能表现&#xff0c;聚焦网络传输和系统处理能力&#xff0c;通过客观指标量化服务质量。核心指标 码率/带宽&#xff1a;数据传输速率上限&#xff0c;直接…...

编程日记 2026/1/28 3:27:05

Qt之QNetworkInterface

简介 用于表示网络接口&#xff08;即网卡&#xff09;信息 常用接口 static QList<QNetworkInterface> allInterfaces(); static QList<QHostAddress> allAddresses(); QList<QNetworkAddressEntry> addressEntries() const;接口类型 用枚举InterfaceTy…...

编程日记 2025/11/27 1:22:13

pom导包成功，但是就是无法使用相关类，同时报错：Library:Maven ‘xxx‘ has broken path

开发环境&#xff1a;Intellij 2023 一、问题记录 在maven工程的pom文件导入如下某一依赖(JGit)。没有显示导包的错误&#xff0c;同时在maven仓库里面找到对应的包是正常下载到相应jar的。 但是就是无法引入相关的类。打开Project Structure&#xff0c;在Dependencies中发现…...

编程日记 2026/1/28 2:09:35

大数据技术之Scala

Spark运行架构核心是一个计算引擎 核心组件 1. Driver&#xff08;驱动器&#xff09; 角色&#xff1a;Spark作业的“大脑”&#xff0c;负责解析用户代码、生成任务并调度执行。 功能&#xff1a; 将用户程序转换为作业&#xff08;Job&#xff09;。 …...

编程日记 2025/11/18 16:26:59

LeetCode刷题常见的Java排序

1. 字符串排序（字母排序） 首先，你的代码实现了根据字母表顺序对字符串中的字母进行排序，忽略了大小写并且保留了非字母字符的位置。关键点是： 提取和排序字母：通过 Character.isLetter() 判断是否为字母，并利用 Character.toLowerCase() 来忽略大小写进行排序。保留非字…...

编程日记 2025/11/15 4:53:14

mysql的下载和安装2025.4.8

mysql下载和安装 MySQL的下载网址&#xff1a; https://www.mysql.com/downloads/ 点击进入Windows版本下载&#xff1a;我们可以选择需要的MySQL版本以及所需的操作系统&#xff0c;这里选择离线安装&#xff1a; 注意&#xff1a;MySQL 8.0 是带有 MySQL Installer 的最后一…...

编程日记 2026/1/28 6:28:45

QML Loader：延迟加载与动态切换

目录 引言相关阅读工程结构LoaderDelay.qml - 延迟加载实现完整代码HeavyComponent.qml代码解析运行效果 LoaderSwitch.qml - 动态切换组件完整代码代码解析运行效果 Main.qml - 主界面实现完整代码主界面结构代码解析 总结下载链接 引言 QML的Loader组件提供了一种强大的机制…...

编程日记 2026/1/29 10:24:32

Python和MicroPython的解释器区别

Python和MicroPython的解释器不是同一个&#xff0c;它们在设计目标、实现方式和运行环境上都有显著的区别。以下是它们的主要区别&#xff1a; 1. 底层实现 Python解释器&#xff08;CPython&#xff09;&#xff1a; Python的标准解释器是CPython&#xff08;C语言实现的Pyt…...

编程日记 2025/11/14 8:43:33

Git 的进阶功能和技巧

1、分支的概念和使用 1.1、什么是分支&#xff1f; 分支&#xff08;Branch&#xff09;是在版本控制中非常重要的概念。几乎所有版本控制系统都支持某种形式的分支。在 Git 中&#xff0c;分支是 Git 强大功能之一&#xff0c;它允许我们从主开发线分离出来&#xff0c;在不…...

编程日记 2026/1/29 9:40:55

解析HiveQL的ALTER TABLE ADD/REPLACE COLUMNS语句

阅读以下ALTER TABLE的ADD/REPLACE COLUMNS语句的语法，用C#编写解析函数，一个一个字符解析，所有关键字不区分大小写，一个或多个空格、Tab和换行的组合都可以是关键词之间的分隔，表名和字段名可能包含空格和Tab，语句中可以用`包裹表名和字段名，解析以下HiveQL语句在所有可…...

编程日记 2026/1/21 0:10:09