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

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

news 2025/12/16 19:00:54
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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/12/12 9:42:53

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/12/15 19:58:03

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）

HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...

编程新知 2025/8/4 18:55:37

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/12/15 16:57:42

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2025/12/14 8:37:22

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/12/10 5:18:09

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/12/15 2:28:48

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/12/5 18:12:58