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

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

news 2025/10/26 23:29:11
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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/9/25 23:02:22

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/10/24 2:34:21

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/10/24 16:29:44

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/10/19 17:15:36

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/10/26 16:14:26

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/20 17:52:30

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/10/24 11:18:33

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/10/13 7:34:19