【HTML5】svg 绘制图形

news2024/12/26 0:02:26

文章目录

    • 一、基本介绍
    • 二、用法详解
      • 2.1、矩形（rect）
      • 2.2、圆形（circle）
      • 2.3、椭圆（ellipse）
      • 2.4、线条（line）
      • 2.5、折线（polyline）
      • 2.6、多边形（polygon）
      • 2.7、路径（path）

一、基本介绍

  • 什么是 SVG？
1. SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
2. SVG 用于定义用于网络的基于矢量的图形
3. SVG 使用 XML 格式定义图形
4. SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
5. SVG 是万维网联盟的标准
  • SVG 的优势，与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
1. SVG 图像可通过文本编辑器来创建和修改
2. SVG 图像可被搜索、索引、脚本化或压缩
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5. SVG 可在图像质量不下降的情况下被放大
  • 基本用法：
属性描述
xmlns定义 SVG 命名空间
version定义所使用的 SVG 版本
width设置此 SVG 文档的宽度
height设置此 SVG 文档的高度
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="200" width="200">
		  <polygon points="100,10 40,180 190,60 10,60 160,180"
		  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

二、用法详解

  • 图形的 style 属性
属性描述
fill定义图形的填充颜色
stroke-width定义图形边框的宽度
stroke定义图形边框的颜色
fill-opacity定义填充颜色透明度（合法的范围是：0 - 1）
stroke-opacity定义笔触颜色的透明度（合法的范围是：0 - 1）
opacity定义整个元素的透明值

2.1、矩形（rect）

  • <rect> 标签可用来创建矩形，以及矩形的变种。
属性描述
width定义矩形的宽度
height定义矩形的高度
style定义 CSS 属性
x定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
y定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
rx 和 ry可使矩形产生圆角
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="200" width="200">
		  <rect x="20" y="20" width="100" height="100" rx="20" ry="20"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

  • 使用 style 属性：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="200" width="200">
		  <rect x="20" y="20" width="100" height="100" rx="20" ry="20"
		  style="fill:red; stroke:black; stroke-width:5; opacity:0.5"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.2、圆形（circle）

  • <circle> 标签可用来创建一个圆（如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) ）
属性描述
r定义圆的半径
cx圆点的 x 坐标
cy圆点的 y 坐标
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <circle cx="100" cy="50" r="40"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

  • 使用 style 属性：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <circle cx="100" cy="50" r="40" style="fill:red; stroke:black; stroke-width:5; opacity:0.5"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.3、椭圆（ellipse）

  • <ellipse> 标签可用来创建椭圆。
属性描述
rx定义水平半径
ry定义垂直半径
cx圆点的 x 坐标
cy圆点的 y 坐标
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <ellipse cx="75" cy="75" rx="60" ry="30"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

  • 使用 style 属性：使用方法同上

2.4、线条（line）

  • <line> 标签用来创建线条。
属性描述
x1在 x 轴定义线条的开始
y1在 y 轴定义线条的开始
x2在 x 轴定义线条的结束
y2在 y 轴定义线条的结束
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <line x1="0" y1="10" x2="100" y2="150" style="stroke:red;"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.5、折线（polyline）

  • <polyline> 标签用来创建仅包含直线的形状。
属性描述
points定义折线每个折点的 x 和 y 坐标
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.6、多边形（polygon）

  • <polygon> 标签用来创建含有不少于三个边的图形。
属性描述
points定义多边形每个角的 x 和 y 坐标
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <polygon points="22,10 30,21 17,25"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

2.7、路径（path）

  • <path> 标签用来定义路径。
  • 以下所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
命令描述中文
Mmoveto移动
Llineto画线
Hhorizontal lineto横画线
Vvertical lineto垂直画线
Ccurveto曲线
Ssmooth curveto光滑曲线
Qquadratic Belzier curve二次贝塞尔曲线
Tsmooth quadratic Belzier curveto二次贝塞尔光滑曲线
Aelliptical Arc椭圆弧
Zclosepath结束绘制路径
  • 定义了一条路径，它开始于位置 25 15，到达位置 15 35，然后从那里开始到 35 35，最后在 25 15 关闭路径。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="150" width="150">
		  <path d="M25 15 L15 35 L35 35 Z"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

  • 绘制一个螺旋：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			svg {
				border: 1px greenyellow solid;
			}
		</style>
	</head>
	<body>
		<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="500" width="100%">
		  <path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"/>
		</svg>
	</body>
	<script>
	</script>
</html>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/706381.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis 发布/订阅介绍

Redis 发布/订阅介绍

目录 ​编辑 一、发布与订阅 6.1 频道 6.1.1 发布 6.1.2 订阅 6.1.3 数据结构 6.1.3.1 订阅&#xff08;channel&#xff09; 6.1.3.2 发布 6.1.3.3 退订 6.2 模式&#xff08;pattern&#xff09; 6.2.1 发布 6.2.2 订阅 6.2.3 数据结构 6.2.3.1 发布 6.2.3.2 订阅 6.2.3.…
阅读更多...
登录远程Linux桌面

登录远程Linux桌面

远程桌面连接主要使用两种协议&#xff0c;一种是Windows上RDP协议&#xff0c;第二种是VNC协议&#xff0c;从使用效果来看&#xff0c;vnc更优秀。 一、VNC 使用x11vnc 1.安装x11vnc sudo apt install x11vnc 2.启动x11vnc x11vnc -passwd orangepi -display :0 -forever…
阅读更多...
【线程池】ScheduledExecutorService接口和ScheduledThreadPoolExecutor定时任务线程池使用详解

【线程池】ScheduledExecutorService接口和ScheduledThreadPoolExecutor定时任务线程池使用详解

目录 〇、简介 0.1 ScheduledExecutorService 和 Timer 的区别 一、什么是ScheduledExecutorService&#xff1f; 二、ScheduledThreadPoolExecutor中的方法 2.1 构造方法 2.2 schedule方法 2.3 scheduleAtFixedRate方法 2.4 scheduleWithFixedDelay方法 2.5 setConti…
阅读更多...
什么是组件，以及前端各种框架组件的使用方法

什么是组件，以及前端各种框架组件的使用方法

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;介绍什么是组件&#xff0c;以及前端各种框架组件的使用方法 目录 什么是组件&#xff0c;请细看关键点 前端常用框架vue2框架的常用组件库vue3框架的常用组件库react框架的常用组件库微信小程序常用…
阅读更多...
智能三路CAN总线集线器解决CAN总线集线问题

智能三路CAN总线集线器解决CAN总线集线问题

随着科技的发展&#xff0c;CAN总线通讯再各行各业中应用&#xff0c;再不同的应用中&#xff0c;需要把两路CAN集合到一起&#xff0c;或者把一路CAN分为两路&#xff0c;这时候就需要CAN总线集线器来解决。 CANbridge-300每一路CAN通道都具有数据存储转发至另两路CAN通道的功…
阅读更多...
Java——《面试题——分布式篇》

Java——《面试题——分布式篇》

前文 java——《面试题——基础篇》 Java——《面试题——JVM篇》 Java——《面试题——多线程&并发篇》 Java——《面试题——Spring篇》 Java——《面试题——SpringBoot篇》 Java——《面试题——MySQL篇》​​​​​​ Java——《面试题——SpringCloud》 Java…
阅读更多...
SQL查询语句语法结构和运行顺序

SQL查询语句语法结构和运行顺序

语法结构&#xff1a;select–from–where–group by–having–order by–limit 运行顺序&#xff1a;from–where–group by–having–order by–limit–select
阅读更多...
【Vue3】学习笔记-生命周期

【Vue3】学习笔记-生命周期

Vue2.x与vue3生命周期 Vue3.0中可以继续使用Vue2.x中的生命周期钩子&#xff0c;但有有两个被更名&#xff1a; beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子&#xff0c;与Vue2.x中钩子对应关系如下&#…
阅读更多...
只用一次集合遍历实现树形结构，非递归方式

只用一次集合遍历实现树形结构，非递归方式

一般情况下&#xff0c;我们想要实现这种无限层级的树形结构&#xff0c;都是采用递归的方式&#xff0c;但是递归比较占用内存&#xff0c;也容易导致栈溢出&#xff0c;于是只能尝试其它的方法。 下面采用的方式&#xff0c;只需要一次集合的遍历就可以实现树形的结构。 先手…
阅读更多...
Spring Boot 中的 @RabbitListener 注解是什么，原理，如何使用

Spring Boot 中的 @RabbitListener 注解是什么，原理，如何使用

Spring Boot 中的 RabbitListener 注解是什么&#xff0c;原理&#xff0c;如何使用 在 RabbitMQ 中&#xff0c;消息的接收需要通过监听队列来实现。在 Spring Boot 应用程序中&#xff0c;可以使用 RabbitListener 注解来监听队列&#xff0c;并在接收到消息时执行指定的方法…
阅读更多...
Java实现OpenAI模型训练

Java实现OpenAI模型训练

本文章介绍如何用java实现OpenAI模型训练&#xff0c;仅供参考 提前准备工作 OpenAI KEY&#xff0c;获取方式可自行百度需要自备VPN 或 使用国外服务器转发需要训练的数据集&#xff0c;文章格式要求为JSONL&#xff0c;格式内容详见下图&#xff08;尽量不要低于500个问答&…
阅读更多...
消息模块的数据模型设计

消息模块的数据模型设计

目录 一、创建POJO映射类 1. message集合 2. message_ref集合 二、MongoDB的联合查询 MessageRef&#xff1a;保存消息接收人相关信息&#xff0c;接收人ID、消息已读未读、消息是否最新接收。 在 MongoDB 里面我们不需要预先去创建集合&#xff0c;只要我们往 MongoDB 里…
阅读更多...
Linux常用命令——finger命令

Linux常用命令——finger命令

在线Linux命令查询工具 finger 用于查找并显示用户信息 补充说明 finger命令用于查找并显示用户信息。包括本地与远端主机的用户皆可&#xff0c;帐号名称没有大小写的差别。单独执行finger指令&#xff0c;它会显示本地主机现在所有的用户的登陆信息&#xff0c;包括帐号名…
阅读更多...
Layout-静态模板结构搭建、字体图标引入、一级导航渲染、吸顶导航交互实现、Pinia优化重复请求【小兔鲜Vue3】

Layout-静态模板结构搭建、字体图标引入、一级导航渲染、吸顶导航交互实现、Pinia优化重复请求【小兔鲜Vue3】

Layout-静态模板结构搭建 Layout模块静态模板搭建 LayoutNav.vue <script setup></script><template><nav class"app-topnav"><div class"container"><ul><template v-if"true"><li><a h…
阅读更多...
鲸鱼算法WOA优化VMD参数，最小包络熵、样本熵、信息熵、排列熵（适应度函数可自行选择，一键修改）包含MATLAB源代码...

鲸鱼算法WOA优化VMD参数，最小包络熵、样本熵、信息熵、排列熵（适应度函数可自行选择，一键修改）包含MATLAB源代码...

鲸鱼优化算法(Whale optimization algorithm, WOA)是Mirjalili根据座头鲸的捕食行为而提出来的&#xff0c;算法对座头鲸的狩猎行为进行模仿&#xff0c;通过对猎物的寻找&#xff0c;然后攻击进行觅食&#xff0c;以此来达到优化的目的&#xff0c;已有很多学者将算法用于实际…
阅读更多...
【C/C++实现进程间通信 二】消息队列

【C/C++实现进程间通信 二】消息队列

文章目录 前情回顾思路源码Publisher.cppSubscriber.cpp 效果 前情回顾 上一期已经讲解过了进程的相关概念以及进程间通信的实现原理&#xff0c;下面仅展示消息传递机制实现1进程间通信的相关代码。 思路 /*本项目主要用于以消息传递机制的方式进行进程间通信的测试。1.主要…
阅读更多...
很荣幸与屈晗煜在 GitLink 编程夏令营（GLCC）活动中协作

很荣幸与屈晗煜在 GitLink 编程夏令营（GLCC）活动中协作

作为一名软件工程师&#xff0c;天然有着追求代码质量的执念。相信很多人对代码的优雅、质量有着自己的认识&#xff0c;业界也有不少的共识&#xff0c;其中有一条我认为是非常重要的——代码可测试。 作为一名研发&#xff0c;只关注功能可测&#xff08;容易测&#xff09;是…
阅读更多...
BUUCTF old-fashion 1

BUUCTF old-fashion 1

题目描述&#xff1a; 密文&#xff1a; Os drnuzearyuwn, y jtkjzoztzoes douwlr oj y ilzwex eq lsdexosa kn pwodw tsozj eq ufyoszlbz yrl rlufydlx pozw douwlrzlbz, ydderxosa ze y rlatfyr jnjzli; mjy gfbmw vla xy wbfnsy symmyew (mjy vrwm qrvvrf), hlbew rd symmy…
阅读更多...
多元回归预测 | Matlab基于鲸鱼算法(WOA)优化混合核极限学习机HKELM回归预测， WOA-HKELM数据回归预测，多变量输入模型

多元回归预测 | Matlab基于鲸鱼算法(WOA)优化混合核极限学习机HKELM回归预测， WOA-HKELM数据回归预测，多变量输入模型

文章目录 效果一览文章概述部分源码参考资料效果一览 文章概述 多元回归预测 | Matlab基于鲸鱼算法(WOA)优化混合核极限学习机HKELM回归预测， WOA-HKELM数据回归预测，多变量输入模型 评价指标包括:MAE、RMSE和R2等，代码质量极高，方便学习和替换数据。要求2018版本及以上。 …
阅读更多...
【软考程序员学习笔记】——数据结构与算法基础

【软考程序员学习笔记】——数据结构与算法基础

目录 &#x1f34a;一、数据结构概念和分类 &#x1f34a;二、数组特点&存储方式 &#x1f34a;三、矩阵 特殊矩阵 非特殊矩阵 &#x1f34a;四、栈和队列 &#x1f34a; 五、二叉树的性质 &#x1f34a;六、二叉树的遍历 (1)前序遍历(先根遍历&#xff0c;先序遍历…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023