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

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

news 2025/7/12 22:15:08
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

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/7/6 18:33:17

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/7/11 18:23:18

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2025/7/12 17:39:16

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/11 18:27:36

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/6/20 12:42:23

Android15默认授权浮窗权限

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

编程新知 2025/7/11 11:15:18

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

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

编程新知 2025/7/12 2:28:11

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/7/12 4:41:38

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/6/27 3:48:34