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

【Web2D/3D】SVG（第二篇）

news 2026/2/10 13:40:00
1. 前言

        SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用XML描述2D图形的语言，由于SVG是基于XML（HTML也是基于XML的），因为SVG DOM中每个元素都是可以操作的，包含修改元素属性、添加事件处理器，HTML5支持内联SVG。

        本篇梳理和总结SVG绘制图形的DOM元素。

2. SVG元素

        坐标系：左上点是坐标原点(0,0)，x轴正方向向右，y轴正方向向下。

        视口viewport：SVG宽高确定视口大小，默认宽高(300px, 150px)。

元素说明示例
<rect>

功能：创建一个矩形

属性：

x 矩形的左侧位置

y 矩形的顶端位置

width 矩形的宽度

height 矩形的高度

rx x方向圆角半径

ry y方向圆角半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <rect x="50" y="20" width="150" height="150"  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/>

</svg>

继承关系：SVGRectElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<circle>

功能：创建一个圆形

属性：

cx 圆心x轴坐标

cy 圆心y轴坐标

r 圆的半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <circle cx="100" cy="50" r="40" stroke="black"  stroke-width="2" fill="red"/>

</svg>

继承关系：SVGCircleElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<ellipse>

功能：创建一个椭圆

属性：

cx 椭圆圆心x轴坐标

cy 椭圆圆心y轴坐标

rx 椭圆x轴半径

ry 椭圆y轴半径

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>

</svg>

继承关系：SVGEllipseElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<line>

功能：创建一条直线

属性：

x1 直线起点x轴坐标

y1 直线起点y轴坐标

x2 直线终点x轴坐标

y2 直线终点y轴坐标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <line x1="0" y1="0" x2="200" y2="200"  style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

继承关系：SVGLineElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<polyline>

功能：创建一条折线/多段线

属性：

points 折线的坐标点列表，形式x1,y1 x2,y2 x3,y3 ......

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />

</svg>

继承关系：SVGPolylineElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<polygon>

功能：创建一个多边形

属性：

points 多边形的坐标点列表，形式x1,y1 x2,y2 x3,y3 ......

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="210" width="500">

  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

继承关系：SVGPolygonElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<path>

功能：创建一个路径

属性：

d 路径定义

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 xmlns="http://www.w3.org/2000/svg" version="1.1">

  <path d="M150 0 L75 200 L225 200 Z" />

  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />

</svg>

Q或q 有2个坐标点，第1个是参考点，第2个是目标点

C或c 有3个坐标点，第1个和第2个是参考点，第3个是目标点

继承关系：SVGPathElement -> SVGGeometryElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<text>

功能：定义文本

属性：

x 文本起始位置x轴坐标

y 文本起始位置y轴坐标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <text x="0" y="15" fill="red">I love SVG</text>

</svg>

继承关系：SVGTextElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<tspan>

功能：定义文本的位置

x 文本起始位置x轴坐标

y 文本起始位置y轴坐标

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <text x="10" y="20" style="fill:red;">

    Several lines:

    <tspan x="10" y="45">First line</tspan>

    <tspan x="10" y="70">Second line</tspan>

  </text>

</svg>

继承关系：SVGTSpanElement -> SVGTextPositioningElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<defs>

功能：定义图形但不绘制，供其他元素引用

<略>
继承：SVGDefsElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
<textPath>

功能：引用文本路径

href：引用的路径地址

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>

    <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />

  </defs>

  <text x="10" y="100" style="fill:red;">

    <textPath xlink:href="#path1">

      I love SVG I love SVG

    </textPath>

  </text>

</svg>

继承关系：SVGTextPathElement -> SVGTextContentElement -> SVGGraphicsElement -> SVGElement -> Element -> Node -> EventTarget -> Object
滤镜和渐变，以及SVG DOM的操作后续补充
3.  元素的公共属性
元素的属性描述示例
stroke功能：描边颜色

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  <g fill="none" stroke="black" stroke-width="6">

    <path stroke-linecap="butt" d="M5 20 l215 0" />

    <path stroke-linecap="round" d="M5 40 l215 0" />

    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />

  </g>

</svg>

storke-width功能：描边宽度
stroke-linecap

功能：描边的线帽

取值：butt | round | square

stroke-dasharray

功能：创建虚线描边

取值：实线段长度，虚线段长度，实线段长度，......

fill

功能：填充颜色

4. HTML中引用SVG
引用svg的方式优点缺点
<embed src="circle.svg" type="image/svg+xml" />所有主流浏览器均支持，允许使用脚本

不推荐在HTML4和XHTML使用

HTML5允许使用

<iframe src="circle.svg"></iframe>所有主流浏览器均支持，允许使用脚本

不推荐在HTML4和XHTML使用

HTML5允许使用

<object data="circle.svg" type="image/svg+xml"></object>所有主流浏览器均支持，且支持HTML4/XHTML/HTML5不允许使用脚本
HTML直接嵌入<svg>元素

​<!DOCTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </svg>
  </body>
</html> 

5. 总结

        仅图形而言，较为复杂的是<path>，需要学会使用二次贝塞尔曲线、三次贝塞尔曲线、连续二次贝塞尔曲线、连续三次贝塞尔曲线；就图形效果而言，应该是滤镜和渐变的使用。后续为大家补充滤镜和渐变，以及SVG DOM的操作、绑定事件处理程序。

下一篇：【Web2D/3D】Canvas（第三篇）-CSDN博客

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~ 

相关文章：

【Web2D/3D】SVG（第二篇）

1. 前言 SVG&#xff08;Scalable Vector Graphics&#xff0c;可缩放矢量图形&#xff09;是一种使用XML描述2D图形的语言&#xff0c;由于SVG是基于XML&#xff08;HTML也是基于XML的&#xff09;&#xff0c;因为SVG DOM中每个元素都是可以操作的&#xff0c;包含修改元素属…...

编程日记 2023/12/28 12:44:42

leetcode18. 四数之和

题目描述 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1a; …...

编程日记 2023/12/28 12:41:40

（十八）Flask之threaing.local()对象

0、引子&#xff1a; 如下是一段很基础的多线程代码&#xff1a; from threading import Threaddemo 0def task(arg):global demodemo argprint(demo)for i in range(10):t Thread(targettask, args(i, ))t. start()当程序运行时&#xff0c;可能会看到输出的顺序是混乱的…...

编程日记 2023/12/28 12:38:37

ffmpeg 硬件解码零拷贝unity 播放

ffmpeg硬件解码问题 ffmpeg 在硬件解码&#xff0c;一般来说&#xff0c;我们解码使用cuda方式&#xff0c;当然&#xff0c;最好的方式是不要确定一定是cuda&#xff0c;客户的显卡不一定有cuda&#xff0c;windows 下&#xff0c;和linux 下要做一些适配工作&#xff0c;最麻…...

编程日记 2023/12/28 12:36:36

高德地图_公共交通路径规划API，获取两地点之间的驾车里程和时间

import pandas as pd import requests import jsondef get_dis_tm(origin, destination,city,cityd):url https://restapi.amap.com/v3/direction/transit/integrated?key xxx #这里就是需要去高德开放平台去申请key,请在xxxx位置填写,web服务APIlink {}origin{}&desti…...

编程日记 2023/12/28 12:32:33

PyTorch深度学习实战（28）——对抗攻击(Adversarial Attack)

PyTorch深度学习实战&#xff08;28&#xff09;——对抗攻击 0. 前言1. 对抗攻击2. 对抗攻击模型分析3. 使用 PyTorch 实现对抗攻击小结系列链接 0. 前言 近年来&#xff0c;深度学习在图像分类、目标检测、图像分割等诸多领域取得了突破性进展&#xff0c;深度学习模型已经能…...

编程日记 2023/12/28 12:31:32

MariaDB单机多实例的配置方法

1、什么是数据库的单机多实例 数据库的单机多实例是指在一台物理服务器上运行多个数据库实例。这种部署方式允许多个数据库实例共享相同的物理资源&#xff0c;如CPU、内存和存储&#xff0c;从而提高硬件利用率并降低成本。每个数据库实例可以独立运行&#xff0c;处理不同的…...

编程日记 2023/12/28 12:28:30

加强-＞servlet-＞tomcat

0什么是servlet jsp也是servlet 细细体会 Servlet 是 JavaEE 的规范之一&#xff0c;通俗的来说就是 Java 接口&#xff0c;将来我们可以定义 Java 类来实现这个接口&#xff0c;并由 Web 服务器运行 Servlet &#xff0c;所以 TomCat 又被称作 Servlet 容器。 Servlet 提供了…...

编程日记 2023/12/28 12:27:29

Python初学者必须吃透的69个内置函数！

所谓内置函数&#xff0c;就是Python提供的, 可以直接拿来直接用的函数&#xff0c;比如大家熟悉的print&#xff0c;range、input等&#xff0c;也有不是很熟&#xff0c;但是很重要的&#xff0c;如enumerate、zip、join等&#xff0c;Python内置的这些函数非常精巧且强大的&…...

编程日记 2023/12/28 12:25:27

Day73力扣打卡

打卡记录 统计移除递增子数组的数目 II&#xff08;双指针&#xff09; 链接 class Solution:def incremovableSubarrayCount(self, a: List[int]) -> int:n len(a)i 0while i < n - 1 and a[i] < a[i 1]:i 1if i n - 1: # 每个非空子数组都可以移除return n …...

编程日记 2023/12/28 12:22:24

Android原生实现分段选择

六年前写的一个控件&#xff0c;一直没有时间总结&#xff0c;趁年底不怎么忙&#xff0c;整理一下之前写过的组件。供大家一起参考学习。废话不多说&#xff0c;先上图。 一、效果图 实现思路使用的是radioGroup加radiobutton组合方式。原理就是通过修改RadioButton 的backgr…...

编程日记 2023/12/28 12:21:24

在 Unity 中获取 Object 对象的编辑器对象

有这个需求的原因是&#xff0c;在编辑器的 Inspector 逻辑中&#xff0c;写了许多生成逻辑。 现在不想挨个在 Inspector 上都点一遍按钮&#xff0c;所以就需要能获取到它们的编辑器对象。 发现可以借助官方的 UnityEditor.Editor.CreateEditor 方法达到目的&#xff0c;如下…...

编程日记 2023/12/28 12:19:22

idea自动注释

前言 保存一下自己的自动注释代码 idea自动注释 前言1 创建类时&#xff0c;自动生成注释2 在方法上使用快捷键生成注释3 使用方法4 效果图 1 创建类时&#xff0c;自动生成注释 如下&#xff1a; #if (${PACKAGE_NAME} && ${PACKAGE_NAME} ! "")package …...

编程日记 2023/12/28 12:18:21

阿里云 ACK 云上大规模 Kubernetes 集群高可靠性保障实战

作者&#xff1a;贤维 马建波 古九 五花 刘佳旭 引言 2023 年 7 月&#xff0c;阿里云容器服务 ACK 成为首批通过中国信通院“云服务稳定运行能力-容器集群稳定性”评估的产品&#xff0c; 并荣获“先进级”认证。随着 ACK 在生产环境中的采用率越来越高&#xff0c;稳定性保…...

编程日记 2023/12/28 12:16:19

如何在无公网IP环境使用Windows远程桌面Ubuntu

文章目录 一、 同个局域网内远程桌面Ubuntu二、使用Windows远程桌面连接三、公网环境系统远程桌面Ubuntu1. 注册cpolar账号并安装2. 创建隧道&#xff0c;映射3389端口3. Windows远程桌面Ubuntu 四、 配置固定公网地址远程Ubuntu1. 保留固定TCP地址2. 配置固定的TCP地址3. 使用…...

编程日记 2023/12/28 12:15:19

Python——yolov8识别车牌2.0

目录 一、前言 二、关于项目UI 2.1、修改界面内容的文本 2.2、修改界面的图标和图片 三、项目修改地方 四、其他配置问题 一、前言 因为后续有许多兄弟说摄像头卡顿&#xff0c;我在之前那个MATS上面改一下就可以了&#xff0c;MAST项目&#xff1a;基于YOLOv8的多端车流检…...

编程日记 2023/12/28 12:14:18

Cookie的详解使用（创建，获取，销毁）

文章目录 Cookie的详解使用&#xff08;创建&#xff0c;获取&#xff0c;销毁&#xff09;1、Cookie是什么2、cookie的常用方法3、cookie的构造和获取代码演示SetCookieServlet.javaGetCookieServlet.javaweb.xml运行结果如下 4、Cookie的销毁DestoryCookieServletweb.xml运行…...

编程日记 2023/12/28 12:13:17

shell脚本自动化部署Zabbix4.2（修改脚本替换版本）

#!/bin/bash # 配置无人值守的安装&#xff0c;定义安装过程中需要用到的一些信息 DBPasswordadmin123 CacheSize256M ZBX_SERVER_NAMEZabbix-Server http_port80 # 配置 Zabbix 防火墙 firewall-cmd --permanent --zonepublic --add-port10051/tcp firewall-cmd…...

编程日记 2023/12/28 12:12:16

java SSM课程平台系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM课程平台系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S…...

编程日记 2023/12/28 12:09:14

k8s二进制最终部署（网络 负载均衡和master高可用）

k8s中的通信模式 1、pod内部之间容器与容器之间的通信&#xff0c;在同一个pod 中的容器共享资源和网络&#xff0c;使用同一个网络命名空间&#xff0c;可以直接通信的 2、同一个node节点之内&#xff0c;不同pod之间的通信&#xff0c;每个pod都有一个全局的真实的IP地址&a…...

编程日记 2023/12/28 12:03:09

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2026/2/10 11:02:44

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/2/10 13:18:55

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/2/10 13:23:50

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2026/2/2 1:48:09

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/9 4:13:22

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2026/1/30 6:19:54

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/2/4 17:33:27