阅读量:0
SVG中的视窗坐标系与用户坐标系通过变换矩阵实现映射，包括平移、缩放、旋转等操作。
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换
SVG（可缩放矢量图形）是一种用于定义图形的XML格式，它支持动画和交互，并且能够以任何分辨率进行缩放而不失真，在SVG中，存在两套坐标系统：视窗坐标系和用户坐标系，了解这两套坐标系及其变换是掌握SVG绘图的关键。
SVG中的坐标系统
1、视窗坐标系：
视窗坐标系是创建视窗的元素所对应的坐标系。
它有原点、x轴和y轴，默认情况下，原点位于视窗左上角，x轴水平向右，y轴竖直向下。
视窗坐标系的尺寸由CSS或SVG元素的width和height属性设置。
如果SVG嵌入到其他对象中，如object元素，则可能使用外围对象的尺寸作为视窗尺寸。
2、用户坐标系：
每个图形元素都有自己的用户坐标系，默认情况下与视窗坐标系重合。
当对图形元素进行变换时，会创建新的用户坐标系，该元素及其子元素的所有坐标和尺寸都会使用这个新的用户坐标系。
用户坐标系的原点也是在视窗左上角，x轴水平向右，y轴竖直向下。
坐标空间变换
1、视窗空间变换：
通过viewBox属性控制，该属性定义了视窗显示的区域。
viewBox属性值的格式为(x0, y0, u_width, u_height)，其中(x0, y0)是视窗左上角的坐标，u_width和u_height分别是视窗的宽和高。
变换包括缩放和平移，缩放比例为width/u_width和height/u_height，平移则是将视窗左上角设置为(x0, y0)。
2、用户空间变换：
由图形元素的transform属性控制，可以应用于当前元素及其子元素。
常见的变换函数包括translate（平移）、scale（缩放）和rotate（旋转）。
能建立新视窗的元素
svg：支持嵌套，每个嵌套的svg元素都会创建新的视窗和坐标系。
symbol：当被use元素实例化时，会创建新的视窗。
image：引用SVG元素时，会创建新的视窗。
foreignObject：创建新的视窗来渲染XHTML内容。
四、保持缩放比例 preserveAspectRatio属性
作用：控制图形在视窗中的缩放方式，确保图形按固定比例缩放。
使用条件：只有在设置了viewBox属性后，preserveAspectRatio属性才会起作用。
语法：preserveAspectRatio="[defer] [align] [meet | slice]"，其中align参数决定了统一缩放的对齐方式。
相关问答FAQs
1、问：在SVG中，如何通过设置viewBox属性来实现图形的缩放？
答：通过设置viewBox属性的u_width和u_height值，可以控制图形的缩放，如果viewBox="0 0 100 100"而SVG的width和height分别设置为200，则图形会被放大两倍显示。
2、问：如何在SVG中保持图形的宽高比不变？
答：通过设置preserveAspectRatio属性，可以保持图形的宽高比不变。preserveAspectRatio="xMidYMid meet"会在保持宽高比的同时，使图形居中并完整显示在视窗内。
详细介绍了HTML5之SVG 2D入门6中的视窗坐标系与用户坐标系及变换，并通过示例和问答形式加深了理解，希望这些信息能帮助你更好地掌握SVG中的坐标系统和变换操作。
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换
SVG（可缩放矢量图形）是一种基于可扩展标记语言的图形矢量格式，SVG 2D图形绘制涉及多个坐标系的概念，包括视窗坐标系和用户坐标系，SVG还提供了丰富的变换功能，使得图形的绘制和操作更加灵活，本文将详细介绍视窗坐标系与用户坐标系，并对SVG的变换进行。
视窗坐标系与用户坐标系
视窗坐标系
视窗坐标系是SVG图形绘制的基础坐标系，它定义了SVG元素在浏览器窗口中的位置和大小，在SVG中，视窗坐标系的原点（0,0）位于SVG元素的左上角，x轴向右延伸，y轴向下延伸。
视窗坐标系的属性：
viewBox：定义了SVG元素的内容区域，其格式为"minx miny width height"。
width 和height：定义了SVG元素的大小。
用户坐标系
用户坐标系是基于视窗坐标系的一个虚拟坐标系，它允许开发者对SVG图形进行缩放、旋转等操作，用户坐标系的原点与视窗坐标系相同，但其单位长度与视窗坐标系不同。
用户坐标系的属性：
transform：应用于SVG元素的变换属性，包括缩放（scale）、旋转（rotate）、平移（translate）等。
变换
SVG提供了丰富的变换功能，可以对图形进行各种操作，以下是一些常见的变换类型：
缩放（Scale）
缩放变换可以改变图形的大小，正数缩放会使图形变大，负数缩放会使图形变小。
缩放示例：
```xml
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" style="fill:blue"/>
<use href="#rect" transform="scale(2)"/>
</svg>
```
旋转（Rotate）
旋转变换可以使图形绕指定点旋转一定角度。
旋转示例：
```xml
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" style="fill:blue"/>
<use href="#rect" transform="rotate(45 50 50)"/>
</svg>
```
平移（Translate）
平移变换可以将图形在水平或垂直方向上移动。
平移示例：
```xml
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" style="fill:blue"/>
<use href="#rect" transform="translate(20 20)"/>
</svg>
```
合并变换（Composite Transformations）
SVG允许将多个变换合并为一个变换，以实现更复杂的图形操作。
合并变换示例：
```xml
<svg width="200" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" style="fill:blue"/>
<use href="#rect" transform="translate(20 20) scale(2) rotate(45 50 50)"/>
</svg>
```
SVG的视窗坐标系和用户坐标系以及变换功能为开发者提供了强大的图形绘制和操作能力，通过合理运用这些概念，可以创建出丰富多样的矢量图形。
