SVG坐标系统与坐标转换
来源:互联网 发布:触点软件下载 编辑:程序博客网 时间:2024/05/23 13:34
这一章非常基础,非常重要,同时也是相对比较难懂一点的,特别是ViewBox与视口的关系
1.坐标系统与视口(ViewPort)
SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成,SVG的坐标系统称为工作区坐标系统或者矩阵坐标系统。
SVG的渲染都是在一个矩形区域内发生的,这个有限的矩形区域在SVG中被称为"视口",超出这个视口的图形将不被显示,所以视口也就是SVG的渲染区域,用户能看到SVG内容的区域。SVG客户端在解析渲染一个SVG文件前,会根据实际显示设备的参数来确定视口的参数,比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后,SVG客户端就会初始化视口,建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定,也就是SVG整个图像在浏览器中显示的大小,使得视口的坐标系统同用户坐标系统相同。
默认情况下,SVG坐标系的原点(0,0)与左上角,与视口的左上角是完全重合。此时,SVG坐标系同用户坐标系一致,没有发生变形错位的现象
2.ViewBox属性
如果我们定义的SVG 图形太大或者太小,就可以使用“ViewBox”属性,重新定义视口的坐标范围,从而默认的坐标度量单位也就会随之改变。“ViewBox”属性4个发生分别是:左上角X坐标、左上角Y坐标、ViewBox的宽度和ViewBow的高度。
ViewBox属性是一个非常有用的属性,在进行图形缩放和移动,主要就是对这个属性进行改变,就能实现类似于谷歌地图一样的功能。
3.Transform属性
能过"Transform"属性,我们可以对图形进行位置和形状的变换,其本质是一种几何上的坐标变换。
3.1 平移变换
平移变换可以改变坐标系的原点位置,而新坐标系的坐标轴方向不变。语法如下:
Transform ="translate(x,y)";
例子:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
<!-- Created by SVGDeveloper 1.0 -->
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform ="translate(0,0)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(50,50)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
<g transform ="translate(100,100)">
<circle cx="50" cy="50" r="30" stroke="#000000"/>
</g>
</svg>
- SVG坐标系统与坐标转换
- SVG坐标系统与坐标转换
- svg 实践之屏幕坐标与svg元素坐标转换
- SVG 坐标转换
- SVG 坐标转换
- 测绘坐标系统与坐标转换
- canvas与svg中的坐标系统
- SVG - 坐标与变换
- svg 坐标
- 坐标系统的转换
- SVG坐标系统和transformation彻底理解
- SVG坐标系统及图形变换
- 窗口坐标与地图坐标的转换
- 地图坐标与屏幕坐标的转换
- 屏幕坐标与客户坐标的转换
- 屏幕坐标与客户区坐标转换
- WGS84坐标与北京54坐标转换
- unity世界坐标与相对坐标转换
- php:substr_count (PHP 4, PHP 5) — 计算字串出现的次数
- select在各个浏览器中的兼容性问题
- Objective-C内存管理 调试内存泄露
- ANDROID INTENT.FLAG_NEW_TASK详解,包括其他的标记的一些解释
- 线程中CreateEvent和SetEvent及WaitForSingleObject的用法
- SVG坐标系统与坐标转换
- ACM训练方案
- Objective-C内存管理 理解Autorelease
- Linux常用的服务器监控shell脚本
- 多线程、Socket技术及委托技术的关系
- 我的阅读编程书籍的好方法
- 各大OJ题目分类
- 像建筑设计师一样去写程序
- C#获取Exception errorCode