SVG坐标系及样式

最新推荐文章于 2022-07-21 20:32:43 发布
最新推荐文章于 2022-07-21 20:32:43 发布
阅读量439 收藏
点赞数 1
分类专栏： H5学习 文章标签： svg html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ayhg1/article/details/118250011
版权

一、SVG名词解释

  1. 画布(世界)
    世界可以是无限大，你想让它多大就多大，可以在上面绘制很多东西。但是世界上的所有东西都能被页面看到（视野只能看到视野所看到的部分）
  2. 视野
    被页面看到的部分是视野。视野是可以移动的（类似于截图模式）
  3. 视窗
    在 svg中的宽和高（相当于全屏模式）

二、SVG viewBox

  • viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素
  • viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height， 以空格或者逗号分隔开， 在用户空间中指定一个矩形区域映射到给定的元素
    在这里插入图片描述
    例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<!-- 
			 viewbox="0,0,30,30"
			 0,0 左上角（原点坐标）
			 30,30 自定义了svg的宽高
			svg宽高300*300，被我等比例缩放为30*30
		 
		 -->
		<svg>
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>


		<!--  
			原图像大小  10 10   原图像位置 10   10   
			原画布大小300*300 现画布只取100*100，则原位置横坐标扩大三倍，纵坐标扩大三倍
			现画布大小  30 30   现图像位置 30   30
		 -->
		<svg viewbox="0,0,100,100">
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>

		<!-- 
			viewbox(视野) 的宽高比视窗的宽高大，图形则缩小
			viewbox(视野) 的宽高比视窗的宽高小，图形则放大
			
		 -->
		<svg viewbox="0,0,600,600">
			<rect x=10 y=10 width=100 height=100 fill='green'></rect>
		</svg>

		<svg>
			<rect x=10 y=10 width=100 height=100 fill='green'></rect>
		</svg>

		<!-- 
			注意：
				viewbox（视野），宽高不能为0，为0的话画布上的图形，都是不可见的
		 -->
		<svg viewbox="100,100,100,100">
			<rect x=10 y=10 width=100 height=100 fill='pink'></rect>
		</svg>
	</body>
</html>

三、SVG preserveAspectRatio

属性值说明
xMinviewport和viewBox 左边对齐
xMidviewport和viewBox x轴中心对齐
xMaxviewport和viewBox 右边对齐
YMinviewport和viewBox 上边对齐
YMidviewport和viewBox y轴中心对齐
YMaxviewport和viewBox 下边对齐
属性值说明
meet保持纵横比缩放viewBox适应viewport
slice保持纵横比同时比例小的方向放大填满viewport
none扭曲纵横比以充分适应viewport
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<!-- 
			 viewbox="0,0,30,30"
			 0,0 坐上角（原点坐标）
			 30,30 自定义了svg的宽高
			svg宽高300*300，被我等比例缩放为30*30
		 
		 -->
		<svg>
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>

		<!-- 注意：
				x必须小写，Y 必须大写，组合使用
				preserveAspectRatio="xMinYMin"
			-->
		<!-- 左上 -->
		<svg viewbox="0,0,100,30" preserveAspectRatio="xMinYMin">
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>

		<!-- 左下 -->
		<svg viewbox="0,0,100,30" preserveAspectRatio="xMinYMax">
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>
		<!-- 居中 -->
		<svg viewbox="0,0,100,30" preserveAspectRatio="xMidYMid">
			<rect x=10 y=10 width=10 height=10 fill='red'></rect>
		</svg>


		<!-- 设置视野与视窗的宽高比 -->

		<!-- 
			meet 保持纵横比缩放viewBox适应viewport （相当于css中的b-size的属性值contain）

			slice 保持纵横比同时比例小的方向放大填满viewport （相当于css中的b-size的属性值cover）
		 -->
		<svg viewbox="0,0,100,30" preserveAspectRatio="xMinYMid none">
			<rect x=10 y=10 width=10 height=10 fill='pink'></rect>
		</svg>

	</body>
</html>

四、SVG 坐标系

  • 对于所有元素，SVG使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下

在这里插入图片描述
四个坐标系

  1. 用户坐标系，世界的坐标系
  2. 自身坐标系，每个图形元素或分组独立与生俱来的
  3. 前驱坐标系，父容器的坐标系
  4. 参考坐标系，使用其他坐标系来参考研究自身的情况使用

用户坐标：

  • SVG的世界是无穷大的，世界里面的坐标系就是用户坐标系

  • 用户坐标系是最原始的坐标系，其他的坐标系都是基于用户坐标系产生的。因此，用户坐标系也被称为原始坐标系
    在这里插入图片描述
    自身坐标：

  • 每个图形或者分组都拥有自己的坐标系，用于定义自己的一些图形属性，例如宽高。
    在这里插入图片描述
    前驱坐标：

  • 父容器的坐标系，图形进行坐标变换都是基于前驱坐标系；

在这里插入图片描述
参考坐标：

  • 使用其他坐标系来观察自身元素坐标位置时使用
    在这里插入图片描述

小锤子案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 800px;
				height: 600px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<!-- 
			分组标签
				g标签 用于分组
					分组功能用于：图形、文字、线段进行分组
					分组可以对一组svg的元素统一调整样式，坐标
		 -->
		<svg>
			<!-- 锤子的头 -->
			<!-- <rect x=100 y=50 width=100 height=50  fill="none" transform="translate(0,50)"  stroke="green"></rect> -->
			<!-- 锤子的把手 -->
			<!-- <rect x=140 y=100 width=20 height=120 fill="none" transform="translate(0,50)" stroke="green"></rect> -->

			<g fill="none" transform="translate(100,50),rotate(45)" stroke="red">
				<!-- 锤子的头 -->
				<rect x=100 y=50 width=100 height=50></rect>
				<!-- 锤子的把手 -->
				<rect x=140 y=100 width=20 height=120></rect>
			</g>

			<!-- 
				 平移：400,50
				 旋转：45°
				 缩放：放大0.5
			 -->
			<g fill="none" transform="translate(400,50),rotate(45),scale(1.5,1.5)" stroke="red">
				<!-- 锤子的头 -->
				<rect x=100 y=50 width=100 height=50></rect>
				<!-- 锤子的把手 -->
				<rect x=140 y=100 width=20 height=120></rect>
			</g>
		</svg>
	</body>
</html>

五、HSL

  • HSL即是代表色相，饱和度，亮度三个通道的颜色，通过对色相(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。
    在这里插入图片描述

六、线性渐变

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<svg>

			<!-- 
				
				id="line" 渐变定义的唯一名称
				
				定义渐变开始和结束位置
				x1='0%' y1='0%' x2='0%' y2='100%'
				渐变的颜色范围，可以由两种或两种以上的颜色组成，一个颜色通过一个stop标签来定义
				<stop offset='0%' style="stop-color: pink;"></stop>
				
				offset='0%' 设置渐变开始和结束
				
				填充渐变
					fill="url(渐变的id名称)" #
					fill="url(#line)"
			 -->

			<!-- 创建了渐变 -->
			<!-- 垂直渐变 y1与y2不同时-->
			<!-- <linearGradient id="line" x1='0%' y1='0%' x2='0%' y2='100%'>
				<stop offset='0%' style="stop-color: pink;"></stop>
				<stop offset='50%' style="stop-color: bisque;"></stop>
				<stop offset='100%' style="stop-color: aqua;"></stop>
			</linearGradient>
			
			<rect fill="url(#line)" x=10 y=10 width=200 height=100></rect> -->


			<!-- 对角渐变 x1,y1与x2,y2不同时-->
			<!-- <linearGradient id="line" x1='0%' y1='0%' x2='100%' y2='100%'>
				<stop offset='0%' style="stop-color: pink;"></stop>
				<stop offset='50%' style="stop-color: bisque;"></stop>
				<stop offset='100%' style="stop-color: aqua;"></stop>
			</linearGradient> -->

			<!-- 水平渐变 x1与x2不同时-->
			<linearGradient id="line" x1='0%' y1='0%' x2='100%' y2='0%'>
				<stop offset='0%' style="stop-color: pink;"></stop>
				<stop offset='50%' style="stop-color: bisque;"></stop>
				<stop offset='100%' style="stop-color: aqua;"></stop>
			</linearGradient>

			<rect fill="url(#line)" x=10 y=10 width=200 height=100></rect>


		</svg>
	</body>
</html>

七、径向渐变

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<svg>

			<!-- 
				
				id="radial" 渐变定义的唯一名称
				 
				 定义外圈渐变
				 cx='50%' cy='50%' r='40%' 
				 定义内圈的渐变
				 fx='50%' fy='50%'
				 
				 渐变的颜色范围，可以由两种或两种以上的颜色组成，一个颜色通过一个stop标签来定义
				 <stop offset='0%' style="stop-color: pink;"></stop>
				 
				 offset='0%' 设置渐变开始和结束
				 
				 填充渐变
				 	fill="url(渐变的id名称)" #
				 	fill="url(#line)"
					
				 通过fill属性引用
			 -->

			<!-- 创建了渐变 -->

			<radialGradient id="radial" cx='50%' cy='50%' r='40%' fx='50%' fy='50%'>
				<stop offset='0%' style="stop-color: pink;"></stop>
				<stop offset='50%' style="stop-color: #990033;"></stop>
				<stop offset='100%' style="stop-color: aqua;"></stop>
			</radialGradient>

			<!-- <rect fill="url(#radial)" x=10 y=10 width=200 height=100></rect> -->

			<circle fill="url(#radial)" cx=200 cy=120 r=100></circle>



		</svg>
	</body>
</html>

八、笔刷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			svg {
				width: 300px;
				height: 300px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>

		<svg>

			<!-- 笔刷：相当于一个样式容器，使用我们只要调用这个笔刷，进行样式填充。
					 绘制一个小圆作为样式
					 使用width与heiht 来表示该笔刷所占标签比例，横向与纵向平铺笔刷样式 
				-->
			<pattern id="p1" width='0.1' height='0.1'>
				<!-- 绘制小圆形 -->
				<circle cx=10 cy=10 r=5 fill='red'></circle>
			</pattern>


			<rect fill="url(#p1)" x=10 y=10 width=200 height=100 stroke='red'></rect>

		</svg>
	</body>
</html>

制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！

SVG 坐标系统
ivenqin的博客
12-21 919
在开始学习如何绘图之前，我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。 数学中的坐标是由 x 轴（水平横向延伸）和 y 轴（垂直纵向延伸）交织组成，交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值，反之为负值，沿 y 轴向上为正值，反之为负值。 而 SVG 网格坐标系统的特点如下所示： 以左上角为坐标系的原点，即 (0,0)。 横向延伸为 X 轴正方向， x 坐标逐渐增大。纵向为 Y 轴正方向
一文带你掌握SVG坐标系统
Cai
12-10 2270
SVG坐标系统 viewport viewport指的是SVG图像的可视区域，一个SVG图像的viewport可以无限大，但是可视区域只能是屏幕的分辨率，我们通过svg元素中的width和height属性指定viewport的尺寸。 <svg width="500" height="300"></svg> 这个例子定义了一个宽500、高300的viewport。 同时，你也可以为svg的viewport指定单位： em：默认的字体大小，通常一个字符的高度 ex：字符x的高
3.SVG坐标系
五石之瓠 以为大樽 浮于江湖 悠笑人生
10-11 1026
3. Coordinates 坐标系 SVG 的世界是一幅无限的画布(infinite canvas)。在本章，我们将弄清楚，如何告诉浏览程序，你对 canvas 的哪一部分感兴趣，它的尺寸是多少，以及如何定位该区域的点。 The Viewport 视窗 文档打算使用的 canvas 区域称为视窗(Viewport)。你通过 <svg> 元素的 width 和 height 属性确定 viewport 的尺寸。每个属性的值可以是单纯的一个数字，在这种不带单位的情况可以是只是，数字被认为是以像素为
05——svg的坐标系统和坐标系
weixin_42289080的博客
11-25 2614
一、什么是svg的坐标系统 众所周知，数学上的坐标系统，大部分是指笛卡尔直角坐标系 并且：x轴向右，y轴向上，角度为逆时针 在svg中，坐标系统同样也是笛卡尔直角坐标系，x轴向右 但是：y轴向下，角度为 顺时针 二、什么是svg的坐标系？ 在svg中，共有4种坐标系： 用户坐标系 自身坐标系 前驱坐标系 参考坐标系 我们来逐个了解一下 1、用户坐标系 即世界坐标系，指的是最原始的svg坐标系 2、自身坐标系 图形元素或分组本身具有的坐标系 3、前驱坐标系 即父级坐标系。 自身坐标系不发生变换的情
深入理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio
weixin_33713350的博客
07-27 137
本文翻译自blog: https://www.sarasoueidan.com/blog/svg-coordinate-systems/ SVG元素不像其他HTML元素一样受css盒子模型所制约。这个特点导致transform和postioning svg元素显得有些神秘，并且初看起来不是那么浅显易懂。然而，一旦你理解了SVG坐标体系以及transformation是如何工作的，那么操作SVG...
SVG的坐标系统
天空之外
01-14 1025
在开始学习如何绘图之前，我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。 数学中的坐标是由 x 轴（水平横向延伸）和 y 轴（垂直纵向延伸）交织组成，交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值，反之为负值，沿 y 轴向上为正值，反之为负值。 而 SVG 网格坐标系统的特点如下所示： 以左上角为坐标系的原点，即 (0,0)。 横向延伸为 X 轴正方向， x 坐标逐渐增大。纵向为 Y 轴正方向
地理坐标系和地图系列的 SVG 底图
月满闲庭的博客
06-26 2757
地理坐标系和地图系列的 SVG 底图 从 v5.1.0 开始，ECharts 支持在 地理坐标系（geo） 和 地图系列（map series） 中使用 SVG 作为底图。之前只支持 GeoJSON 格式的底图。 有了这个功能，ECharts 能在任一种渲染模式（canvas 渲染模式和 svg 渲染模式）中绘制 SVG 底图，并且能够只用简单的 ECharts 配置项（option）就带来 放大、平移、点选（select）、高亮强调（emphasis）、聚焦-淡出（focus-blur）、标签（label
react-native-svg,用于react native的svg库。.zip
09-25
开发者可以通过这些元素来构建丰富的图形结构，并且可以使用CSS样式或内联样式来控制图形的颜色、填充、描边、透明度等视觉效果。 在实际开发中，使用React Native SVG库可以实现以下功能： 1. 创建图标：开发者...
html 重置画布坐标系,H5中canvas的坐标系（画布初始）
weixin_39611666的博客
05-30 965
canvas画布的坐标系canvas画布是通过HTML的标签嵌入到web页面中的，它支持通过CSS结构来设置canvas的一些样式。比如通过style来设置canvas的width，height。这个设置的画布的表象，同时canvas标签还有两个属性width,height，这个用来设置canvas的坐标系的大小。看了这个不明白？好吧，我觉得用语言说也说不太明白，还得配合代码例子才能讲明白。htm...
学习SVG（二）坐标系统
小小的前端
07-21 1208
SVG是用于绘图的，那么它和其他绘图技术一样都是有网格坐标系统。以左上角为坐标系的原点(0,0)。X轴的正方向向右，Y轴的正方向向下。坐标轴以像数为单位。
深入理解 SVG 系列（二） —— SVG 坐标系统
weixin_33796177的博客
07-17 438
这一篇是讲 SVG 的坐标系统，在这之前如果你对 SVG 的基础知识还不是很了解，可以先点这里学习 深入理解 SVG 系列（一） —— SVG 基础。 网格坐标系 和很多计算机绘图所使用的坐标系统一样，SVG 也使用了网格坐标系统。这种坐标系有如下几个特点: 以左上角为坐标系的原点(0,0) X 轴的正方向向右，从 0,0 点开始向右...
SVG 坐标系统概念
卡尔特斯
10-29 315
一、坐标系统概述 SVG 主要用到的是 笛卡尔直角坐标系 原点 互相垂直的两条数轴 角度定义 通常数学角度来看是 逆时针，Y 轴朝上，但是 SVG 的坐标系是 顺时针，Y 轴朝下。 二、四个坐标系 用户坐标系 (User Coordinate) - 世界的坐标系 自身坐标系 (CurrentCoordinate) - 每个图形元素或分组独立与生俱来 前驱坐标系 (Previous Coordinate) - 父容器的坐标系 自身坐标系 与 前驱坐标系 案
SVG坐标系统学习笔记
weixin_34208185的博客
08-25 161
2019独角兽企业重金招聘Python工程师标准>>> ...
html可以用坐标画svg图吗,html5中SVG坐标
weixin_34986860的博客
05-30 165
SVG的世界是一个无限的画布。在本章中，我们将讨论如何你告诉一个浏览器程序，你有兴趣，它的尺寸是什么，以及如何定位点区域内，这个画布视口(viewport)您的文件拟使用面积的画布被称为视口。建立这个视口的大小，宽度和高度属性上元素。这些属性值可以是简单的一个数字，它被假定为以像素为单位，这被说成是在用户坐标指定。你也可以指定宽度和高度作为一个数字后面的单元标识符，它可以是下列之一：em 默认字体...
svg曲线 坐标图
weixin_45936275的博客
08-30 311
地址 svg
SVG坐标系统
weixin_33675507的博客
10-16 143
SVG的画布、画布视区（viewBox）、浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域，理论上在所有维度上都是无限的。（也有人称为“SVG世界”，但我觉得叫画布比较合适） 画布视区（viewBox） 就是截取画布某一块矩形区域作为显示的区域。（有人也称为“视野”或“视区盒子”，但我觉得不够形象。viewBox是与画布相关的，那既然是画布的可视区，那叫画布视区比较容易顾名思义。） 控制画布...
【前端学习svg实例】绘制直角坐标+切线圆
weixin_43722124的博客
07-23 627
11 所有想法，方法源于网络 链接: Python 模块索引.
html可以用坐标画svg图吗,html5教程-SVG基础 SVG坐标系统和图形转换
weixin_42584586的博客
05-30 250
在 坐标系统一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示：而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示：SVG坐标系统的单位你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定单位，将会...
vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置
u014362204的专栏
03-21 3460
<div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="500px"> </svg> </div> methods:{ svgLoad(){ var ming = 'http://www.w3.org/2000...
SVG图形标准详解
5. 坐标系统：掌握SVG中的视口（Viewport）概念，了解默认用户坐标系的使用，以及如何自定义视口的坐标系统。 6. 保持比例：学习如何在缩放时保持图形的比例，确保图形在不同尺寸的设备上看起来一致。 7. 变换：了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

么贺贵

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

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

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

打赏作者

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

抵扣说明：

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

余额充值