HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述

<g transform="translate(-10,-20)">
<g transform="scale(2)">
<g transform="rotate(45)">
<g transform="translate(5,10)">
<!-- graphics elements go here -->
</g>
</g>
</g>
</g>

不带单位的值被认为带的是"用户单位"，就是当前用户坐标系的单位值。
带单位的情况

svg中相关单位与CSS中是一样的：em,ex,px,pt,pc,cm,mm和in。长度还可以使用"%"。
相对度量单位：em和ex也与CSS中一样，是相对于当前字体的font-size和x-height来说的。
绝对度量单位：一个px是等于一个"用户单位"的，也就是"5px"与"5"是一样的。但是一个px是不是对应一个像素，那就看有没有进行过一些变换了。
其他的几个单位基本都是px的倍数：1pt=1.25px,1pc=15px,1mm=3.543307px,1cm=35.43307px,1in=90px。

如果最外层的SVG元素的width和height没有指定单位(也就是"用户单位")，则这些值会被认为单位是px。

这一篇比较拗口，其实只要记住“图形元素的坐标和长度指的是，经过视窗坐标系变换和用户坐标系变换双重变换后，新用户坐标系的坐标和长度”就可以了。

实用参考：
脚本索引：(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：
官方文档：

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!