SVG 坐标系统

Stella981
• 阅读 344

在开始学习如何绘图之前,我们先来看一下 SVG 的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG 也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。

数学中的坐标是由 x 轴(水平横向延伸)和 y 轴(垂直纵向延伸)交织组成,交点被称为坐标原点 (0,0) 。原点沿 x 轴向右为正值,反之为负值,沿 y 轴向上为正值,反之为负值。

而 SVG 网格坐标系统的特点如下所示:

  • 以左上角为坐标系的原点,即 (0,0)
  • 横向延伸为 X 轴正方向, x 坐标逐渐增大。纵向为 Y 轴正方向,y 坐标逐渐增大。
  • 坐标以像素 px 为单位。

SVG 坐标系统

坐标系统单位

SVG 坐标系中对应的值可以指定单位,也可以不指定单位,如果不指定单位则默认单位为 px

下面是 SVG 中支持的长度单位,包含了常见的 CSS 单位:

单位

描述

px

像素,相对于屏幕分辨率

em

相对于父元素的字体大小

ex

字符的高度 x

cm

厘米

mm

毫米

in

英寸

pt

点(1/72 英寸)

pc

Picas(1/21英寸)

画布

SVG 画布就是用来绘制 SVG 内容的一个区域,这个画布可以无限延伸,我们可以在这个画布的任何位置绘制想要的内容。

SVG 视口(ViewPort)

SVG 的渲染都是在一个矩形区域内发生的,这个有限的矩形区域在 SVG 中被称为"视口",超出这个视口的图形将会被裁切并且隐藏。所以视口也就是 SVG 的渲染区域,用户能看到 SVG 内容的区域。

那么为什么超过视口的元素会被隐藏呢?这是因为每个 SVG 元素都有一个默认的 overflow: hidden 样式,所以超过视窗的内容不可见。如果想要让超出部分变为可见,可以将 overflow 属性的值设置为 visible

示例:

例如我们看下面这个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="https://my.oschina.net//u/4144971/blog/4899424/style.css">
    </head>
    <body>
        <svg>
            <rect width="300" height="300" style="fill:pink;"/>
        </svg>
    </body>
</html>    

上述代码中,我们绘制了一个宽为 300px ,高为 300px 的矩形,矩形的填充的颜色为粉色。但是因为我们没有这个 SVG 的视口宽高,所以视口会默认宽高为 300px * 150px,所以在浏览器中可以看到,矩形的高被隐藏了一半: SVG 坐标系统

除了像上述所说的将 overflow 属性设置为 visible,例如:

<svg style="overflow:visible;">
    <rect width="300" height="300" style="fill:pink;"/>
</svg>

我们还可以通过给 <svg> 元素设置 widthheight 属性来给 SVG 视口设置宽和高。只要给视口设置的宽高大于绘制图形的宽高,那么图形就能够完整的显示啦。

其实画布和视口是两个比较容易混淆的概念,每当我们创建一个 <svg> 元素时,就相当于创建了一个无穷大的画布和一个视口。画布和视口分别对应两个坐标系统,一个为用户坐标系,一个为视窗坐标系。

点赞
收藏
评论区
推荐文章
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
1年前
3D数学
4D向量和4x4矩阵不过是对3D运算的一种方便的记忆而已。4D齐次空间4D向量有4个分量,前3个是标准的x,y和z分量,第4个是w,有时称作齐次坐标。为了理解标准3D坐标是怎样扩展到4D坐标的,让我们先看一下2D中的齐次坐标,它的形式为(x,y,w)。想象在3D中w1处的标准2D平面,实际的2D点(x,y)用齐次坐标表示为(x,
Wesley13 Wesley13
1年前
CSS3之2D与3D变换
!(https://oscimg.oschina.net/oscnet/ad817cc0a9554005b6198dc385a416e5cd0.gif)目录关于坐标轴2D变换translate(x,y)rotate(deg)s
Easter79 Easter79
1年前
SVG的坐标系统
在开始学习如何绘图之前,我们先来看一下SVG的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由x轴(水平横向延伸)和y轴(垂直纵向延伸)交织组成,交点被称为坐标原点(0,0)。原点沿x轴向右为正值,反之为负值,沿y轴向上
Stella981 Stella981
1年前
Decision Surface
一、深入理解超平面很多讲解支持向量机的文章从一开头就开始讲超平面及其方程,这样对多数没有基础的人来说较难理解,下面将从一维直线讲起,带你逐步过渡理解超平面。例如,下面是一个只有x轴的一维坐标轴,该轴同样存在原点,x轴正方向和x轴反方向,且该轴上分布了很多点:!(https://oscimg.oschina.net/oscnet/2d9
Wesley13 Wesley13
1年前
Java中当前对象引用
题:计算机画图时,有点的概念,每个点由它的横坐标x和纵坐标y描述。写一个类。求两个点之间的曼哈顿距离横向距离纵向距离例如,一个点(0,0)和另一个点(1,1)的曼哈顿距离为2packagetest;publicclassPoint{
Easter79 Easter79
1年前
SVG 坐标系统
在开始学习如何绘图之前,我们先来看一下SVG的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由x轴(水平横向延伸)和y轴(垂直纵向延伸)交织组成,交点被称为坐标原点(0,0)。原点沿x轴向右为正值,反之为负值,沿y轴向上
Stella981 Stella981
1年前
SVG的坐标系统
在开始学习如何绘图之前,我们先来看一下SVG的坐标系统。与很多计算机绘图所使用的坐标系统一样,SVG也使用了网格坐标系统。这种坐标和我们以前在数学中学过的坐标有些不同。数学中的坐标是由x轴(水平横向延伸)和y轴(垂直纵向延伸)交织组成,交点被称为坐标原点(0,0)。原点沿x轴向右为正值,反之为负值,沿y轴向上
Stella981 Stella981
1年前
Canvas入门07
预备知识直线的斜率一条直线与某平面直角坐标系x轴正半轴方向的夹角的正切值即该直线相对于该坐标系的斜率。对于一条直线ykxb,k就是直线的斜率。斜率的计算!(https://oscimg.oschina.net/oscnet/2217f1d7f737fe5ac60f3f2ff339a6fb328
Stella981 Stella981
1年前
SVG 如何绘制椭圆
本节我们来学习如何在SVG中绘制椭圆,椭圆和圆形有点像,但是又不一样。圆形只有一个半径,而椭圆x轴和y轴上的半径不同,所以椭圆就是一个不规则的圆。如何绘制一个椭圆在绘制椭圆时,可以通过cx和cy属性确定椭圆的圆心,rx设置椭圆的x轴的半径,ry设置y轴的半径。