SVG 坐标系统

2018-11-30 15:57| 作者: admin| 查看: 833| 评论: 0|来自: 蚂蚁部落

绘制任何图形都必须位于一个坐标系中。

很多操作由于过于常态化,反而没有意识到。

如同苹果落地,如果没有刻意强调或者过人的探究精神,谁会意识到万有引力在起作用。

看如下CSS代码效果图示:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155728ywfiwphwiigfshni.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码将红色div元素水平垂直居中在父div中。

很显然,div必须处于一个坐标系中,否则无法定位。

同理,SVG绘图也必须位于一个坐标系中,下面对其坐标系统进行一下介绍。

SVG坐标系统分为两类:

(1).视口坐标系统。

(2).用户坐标系统。

关于视窗内容可以参阅SVG viewport视窗和画布一章节。

比如通过<svg>元素即可创建一个视口,看如下代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  background-color: #ccc;
}
</style>
</head>
<body>
<svg
  x="10" y="10"
  width="200"
  height="130">
  <rect x="50" y="20"
    width="100"
    height="100"
    fill="blue"/>
</svg>                        
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155808lhuxngeh3ezo6dmn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过<svg>元素创建一个视口,随之创建一个视口坐标系。

(2).创建视口坐标系的同时,也会创建一个用户坐标系,此时两个坐标系重合。

(3).最后在此用户坐标系中创建一个蓝色矩形。

SVG中的坐标系,大致图示如下:

特别说明:此图是借用网络上一张常用图片,不知道最初它的出处,所以无法标注引用地址。

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155825lnrxf8qpzc8nnzm8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
svg {
  background-color: #ccc;
}
</style>
</head>
<body>
<svg>
  <rect x="20" y="20"
    width="100"
    height="100"
    fill="blue"
    transform="rotate(10)"/>
</svg>                        
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/155841nbtldbha5rzhnr5g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码通过transform将蓝色矩形旋转一定角度。

从表面上看,是将矩形本身旋转了一定角度,我想很多初学者也是这么认为。

然而实质是,真正被旋转的不是矩形本身,而是矩形所在的用户坐标系。

对于元素的缩放、斜切或者旋转其实都是对坐标系的操作,这时,用户坐标系与视口坐标系分离了。

上面是对坐标系的一些简单介绍,更多内容参阅如下两篇文章:

(1).SVG transform 详解一章节。

(2).SVG transform坐标变化深入理解一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:SVG <switch>元素下一篇:SVG <line> 直线

最新评论

返回顶部