【HTML5】svg 绘制图形

已于 2023-06-30 11:08:25 修改
阅读量4.1k 收藏 23
点赞数
分类专栏： HTML 笔记 文章标签： html5 前端 html svg
于 2023-06-30 10:37:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45677671/article/details/131469601
版权

文章目录

一、基本介绍

  • 什么是 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>

在这里插入图片描述

一颗不甘坠落的流星
关注
  • 0
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用HTML5进行SVG矢量图形绘制的入门教程
09-28
主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下
html5 svg绘制笑脸动画特效
11-07
总的来说，HTML5 SVG绘制笑脸动画特效是一项综合运用HTML、CSS和JavaScript技术的任务。通过熟练掌握这些技术，开发者能够创造出富有吸引力和互动性的网页图形，提升用户体验。在实际项目中，SVG与HTML5的结合不仅...
HTML页面SVG的使用
热门推荐
Kwoky的博客
09-16 1万+
SVG (Scalable Vector Graphics) 可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。 插入svg标签 直接使用 <svg> 标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。 <svg width="400" heihgt="300" id="testSvg"> <circle cx="..
SVG了解与绘图应用
qq_56668869的博客
07-27 830
SVG概念、使用方式、SVG创建图形、SVG绘制矩形、圆形、椭圆、文本、多边形、路径...
良哥汇总：WEB基于SVG图形绘制——手把手教你完成矢量示意图绘制
hualinger的博客
05-10 1352
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。 SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。SVG 的主要特点 矢量图形：SVG 使用基于路径的矢量图形，这意味着图形可以无限放大而不失真。 可伸缩性：S
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 1112
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
HTML画布与SVG（Canvas vs. SVG）
Vec_Kun的博客
02-09 1070
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准。
HTML5(七)——SVG基础入门
2301_76379381的博客
04-07 726
二、SVG 形状元素==========SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。使用语法：四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。
使用 html5 svg 绘制图形
爱是与世界平行
06-23 1063
有一次看一个项目的时候，看到图片的格式为svg,作为萌新的我瞬间有点小懵，这可是之前从没有见到过的格式，于是就开始上某度进行学习，发现某博主的优秀文章，进行转载方便自己学习，感谢原博主的优秀文章。·svg介绍 SVG 是一种使用 XML 描述 2D 图形的语言。 SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
SVG 绘制基本的几何图形
笔记
01-11 960
SVG 全称为，即可缩放矢量图形。SVG 使用 XML 格式定义图形。SVG 图像在改变尺寸或缩放的情况下其图形质量不会有所损失。SVG 是万维网联盟的标准。
HTML5 SVG饼状图形进度条特效代码
03-20
总结来说，"HTML5 SVG饼状图形进度条特效代码"是利用HTML5的SVG技术和jQuery库创建的一种动态图形组件，适用于数据可视化和进度指示。它结合了SVG的矢量特性与jQuery的动画功能，提供了一种优雅的方式展示数据变化。...
html5 svg绘制唐老鸭样式特效代码
03-20
总的来说，"html5 svg绘制唐老鸭样式特效代码"展示了HTML5和SVG在网页设计中的创新应用，它将传统的卡通形象转化为可编程的矢量图形，为网页带来了丰富的视觉体验和互动性。学习和理解这个项目，对于提升前端开发...
html5 svg绘制饼状图表和线性图表动画效果
11-07
在提供的文件"texiao2193_1560680980"中，可能包含一个示例代码，演示了如何使用HTML5和SVG绘制饼状图和线性图的动画。通过分析这个例子，你可以更直观地理解上述知识点，并学习如何在实际项目中应用它们。 总之，...
探索WebKit的画布世界：HTML5 ＜canvas＞ 元素的深度解析
2401_85743969的博客
07-24 1208
canvas>是一个HTML元素，用于通过脚本（通常是JavaScript）动态渲染图形。它提供了一个矩形区域，可以用于线条、曲线、文字和图像的绘制。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1523
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
网站基本布局CSS
m0_46608027的博客
07-24 831
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 796
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 273
【代码】TS如何处理js模块的类型？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一颗不甘坠落的流星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值