SVG系列教程:坐标系统

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

SVG其实相当于一块画板,然后在这块画板上绘图形,而每个画板都会有一个坐标系统。比如说画板的原始起点,绘制图形的起始点坐标,终点坐标等。这一切的一切都离开不坐标,而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲,最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统(当前用户坐标系统)。例如,一个<svg>中使用<circle>绘制的一个圆,他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

笛卡尔坐标系统

记忆中的坐标系统

记忆中的坐标系统(2D)就是有两根轴线(x轴和y轴),交织在一起,而他们这个交点被称为坐标原点(0,0)。沿水平方向左右延伸的这条轴,称之为水平轴(也就是x轴),而沿纵向上下延伸的这条轴,称之为垂直轴(也就是y轴)。原点沿x轴向右为正值,反之为负值;同样在y轴也是如此。如下图所示:

记忆中的坐标系统

但在设计中,坐标系统原点一般都是在屏幕的左上角处。不仿来看看制作软件中的一张平面截图:

设计中的坐标系统

而浏览器中也有一个坐标系统,他和制作图软件中的长得非常相似,原点都在屏幕左上角处:

浏览器中的坐标系统

这似乎脱离今天要说的主题了一样,我们还是回到SVG的坐标系统中来吧。

Viewport

在Web页面开发中,Viewport严格来讲就是浏览器的窗口。他不是一个HTML的概念,也就无法通过CSS修改Viewport。对于桌面浏览器,Viewport其实就是浏览器的宽度高度,而在移动端设备浏览器中,Viewport就稍加复杂。(感兴趣的可以点击这里阅读)。

在SVG中也有一个Viewport,而这个viewport被视为SVG的可见区域大小,将其想象成画布或者画板大小。在<svg>元素中通过设置其widthheight属性来控制SVG的viewport大小。其中widthhegiht的属性值可以直接是一个简单的数字,也可以指定具体的单位。如果没有指定单位,那么将会认其为“像素px”为单位。

单位 含义
em 相对于父元素的字体大小
ex 相对于小写字母"x"的高度
px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸
in inch, 表英寸
cm centimeter, 表厘米
mm millimeter
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/html5/svg-coordinates.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部