SVG坐标系统

约定不等于承诺〃 2022-01-06 13:37 247阅读 0赞

### 文章目录 ###

*  世界坐标系统
 *  最初坐标系统
 *  用户坐标系统
 *  转换坐标系统
 *   *  SVG transfrom
     *  SVG transfrom与CSS transform
     *   *  相似之处
         *  不同之处
     *  SVG transform translate位移
     *   *  语法
         *  参数说明
         *  特别说明

# 世界坐标系统 #

![image][]

即左上角为坐标原点，从坐标原点出发从左到右为`x`轴正方向，从上到下为`y`轴正方向。

# 最初坐标系统 #

![image][image 1]

即以SVG画布的左上角为坐标原点。

# 用户坐标系统 #

![image][image 2]

对于蓝色方块而言，它的坐标表示可以用最初坐标系统来表示，同时也可以以蓝色方块的左上角作为原点，那么蓝色方块的右下角坐标就为`(400, 200)`。

# 转换坐标系统 #

## SVG transfrom ##

`SVG`元素可以通过缩放，移动，倾斜和旋转来进行变换，这一点与`HTML`元素使用CSS的`transform`来变换相似。

**注意，`SVG`中的`transform`是一个属性，是直接写在标签上的**。语法如下：

<rect x="200" y="100" width="400" height="200" transfrom="translate(100)">

`CSS`的`transfrom`也可用于`SVG`元素，但是IE浏览器不支持。

## SVG transfrom与CSS transform ##

### 相似之处 ###

基本变换类型一致，都包括`translate`、`rotate`、`scale`、`skew`、`matrix`。

### 不同之处 ###

在`SVG`中，`transform`的坐标变化是相对于画布左上角进行计算，CSS transform则更加纯粹。

且`SVG`的`transform`只支持二维变换。

## SVG transform translate位移 ##

### 语法 ###

`transform="translate(<tx> [<ty>])"`

### 参数说明 ###

*  `tx`：x轴上的位移值
 *  `ty`：y轴上的位移值

注：

1.  `ty`值是可选的，如果省略，默认值为0
2.  当多个参数值时，可以使用逗号，或者直接空格分隔

### 特别说明 ###

`HTML`元素的偏移是相对自己的中心点，`SVG`元素的偏移是相对`SVG`的左上角。

![image][image 3]

可以看出，`CSS`的`translate`和`SVG`的`translate`的原理就完全不同。

`CSS`是已经存在一个方块，通过`translate`将其位移至新位置。而在`SVG`中则是将**最初坐标系的坐标原点（即`SVG`左上角）进行位移，而后根据标签上的定义绘制方块。**

[image]: http://note.youdao.com/yws/res/14785/8F2FDA2F134E41EF939CA2B05636A800
[image 1]: http://note.youdao.com/yws/res/14794/852577B55703418CB4880F2EA99EB74F
[image 2]: http://note.youdao.com/yws/res/14803/075ADFF340C44917B5848CAA1ADB44AD
[image 3]: http://note.youdao.com/yws/res/14833/80AB277F1E0443979B4ECDE05173C294

发表评论取消回复

表情：

评论列表（有 0 条评论，247人围观）

还没有评论，来说两句吧...

相关阅读

相关 OpenGL with QtWidgets：坐标系统

（本文是LearnOpenGL的学习笔记，教程中文翻译地址[https://learnopengl-cn.github.io/][https_learnopengl-cn.g

清疚/ 2023年07月03日 02:59/ 0 赞/ 17 阅读

相关 Qt 坐标系统

一.坐标系统以屏幕的左上角为原点即(0, 0)点，从左向右为x轴正向，从上向下为y轴正向，这整个屏幕的坐标系统就用来定位顶层窗口；此外，窗口内部也有自己的坐标系统，

本是古典何须时尚/ 2023年06月27日 03:39/ 0 赞/ 9 阅读

相关 GDI 坐标系统与坐标变换(转)

win32程序使用坐标系统之间的变换完成图形的缩放、旋转、平移等输出操作。win32下面总共使用四个坐标空间：世界坐标系、页面坐标系、设备坐标系和物理坐标系（包括客户区、桌面或

￡神魔★判官ぃ/ 2022年09月19日 12:10/ 0 赞/ 256 阅读

相关 OSG数学基础：坐标系统

坐标系是一个精确定位对象位置的框架，所有的图形变换都是基于一定的坐标系进行的。三维坐标系总体上可以分为两大类：左手坐标系和右手坐标系。常用的坐标系：

ゞ浴缸里的玫瑰/ 2022年06月12日 01:17/ 0 赞/ 261 阅读

相关 QT坐标系统

一、坐标系简介。 Qt中每一个窗口都有一个坐标系，默认的，窗口左上角为坐标原点，然后水平向右依次增大，水平向左依次减小，垂直向下依次增大，垂直向上依次减小。原点即为（0

桃扇骨/ 2022年06月02日 08:46/ 0 赞/ 214 阅读

相关 QT 坐标系统理解

https://www.baidu.com/s?wd=QT%20QMatrix&rsv\_spt=1&rsv\_iqid=0xe1e070ee0001f739&issp=1&f

一时失言乱红尘/ 2022年06月02日 07:20/ 0 赞/ 232 阅读

相关 SVG_SVG动画案例

尊重原创，欢迎转载，转载请注明： FROM GA\_studio [http://blog.csdn.net/tianjian4592][http_blog.

柔情只为你懂/ 2022年05月24日 05:57/ 0 赞/ 378 阅读

相关【svg】svg动画

如果你之前没有接触过svg，可以看下这个简略图：[ https://www.processon.com/view/link/5ae205a2e4b0411f64d1f65a][

àì夳堔傛蜴生んèń/ 2022年05月18日 07:51/ 0 赞/ 340 阅读

相关 SVG坐标系统

文章目录世界坐标系统最初坐标系统用户坐标系统转换坐标系统 SVG transfrom SVG transfrom

约定不等于承诺〃/ 2022年01月06日 13:37/ 0 赞/ 248 阅读

相关 Windows GDI+坐标系统详解

1 什么是坐标系坐标系就是确定一组数据位置的标尺。按按照维数分为2维平面坐标系和3维空间坐标系。其实2维坐标系也是`z=0`的3维坐标系的特例。坐标系有三要素，一是

╰+哭是因爲堅強的太久メ/ 2021年06月26日 16:06/ 0 赞/ 536 阅读