viewport和viewBox 下边对齐

℡啨天丶

已于 2022-10-15 15:57:07 修改

阅读量235

点赞数

分类专栏： HTML5必拿下文章标签：前端 javascript html

于 2022-10-15 15:26:39 首次发布

本文链接：https://blog.csdn.net/m0_65037325/article/details/127333101

版权

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

摘要由CSDN通过智能技术生成

一、SVG名词解释

画布(世界)

世界可以是无限大，你想让它多大就多大，可以在上面绘制很多东西。但是世界上的所有东西都能被页面看到（视野只能看到视野所看到的部分）

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

属性值	说明
xMin	viewport和viewBox 左边对齐
xMid	viewport和viewBox x轴中心对齐
xMax	viewport和viewBox 右边对齐
YMin	viewport和viewBox 上边对齐
YMid	viewport和viewBox y轴中心对齐
YMax	viewport和viewBox 下边对齐

最低0.47元/天解锁文章

℡啨天丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
viewport和viewBox 下边对齐

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

扫一扫