SVG坐标系统与SVG视口(ViewPort)
2008.09.12 黄凯伟
介绍SVG坐标系统与SVG视口(ViewPort)知识,通过SVG坐标与常见的测量坐标系统的比较,让我们了解SVG坐标的特点。SVG中的坐标系统是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成,跟常见的测量坐标系不同的是,SVG的坐标系统的原点在左上角而不是右下角。
SVG中的坐标系统是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成,跟常见的测量坐标系不同的是,SVG的坐标系统的原点在左上角而不是右下角,SVG的坐标系统也被称为工作区坐标系统或者矩阵坐标系统。如图1所示。
SVG的渲染都是在一个矩形区域内发生的,这个有限的矩形区域在SVG中被称为“视口”,超出这个视口的图形将不被显示,所以视口也就是SVG的渲染区域,用户能看到的SVG内容的区域。SVG客户端在解析渲染一个SVG文件前,会根据实际显示设备的参数来确定视口的参数,比如视口的一个像素代表实际显示设备尺寸的多少毫米等。在获取这些有效参数后,SVG客户端就会初始化视口,建立以像素为单位的SVG坐标系统。SVG的视口尺寸由<SVG>根标签的“width”和"height"两个属性来决定,也就是SVG整个图像在浏览器中显示的大小,使得视口的坐标系统同用户坐标系统相同。如果有若干个<svg>元素嵌套在一起,那么决定初始化视口的是最外层的那个<svg>元素。
坐标系统初始化的SVG实例
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="100px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Example InitialCoords - SVG's initial coordinate system</desc>
<g fill="none" stroke="black" stroke-width="3" >
<line x1="0" y1="1.5" x2="300" y2="1.5" />
<line x1="1.5" y1="0" x2="1.5" y2="100" />
</g>
<g fill="red" stroke="none" >
<rect x="0" y="0" width="3" height="3" />
<rect x="297" y="0" width="3" height="3" />
<rect x="0" y="97" width="3" height="3" />
</g>
<g font-size="14" font-family="Verdana" >
<text x="10" y="20">(0,0)</text>
<text x="240" y="20">(300,0)</text>
<text x="10" y="90">(0,100)</text>
</g>
</svg>
该实例的SVG视口大小是宽300,高100,单位是像素(px)。从图2中可以看出,SVG坐标系的原点(0,0)在左上角,与视口的左上角完全重合。此时,SVG坐标系同用户坐标系一致,没有发生变形错位的现象。
分享到:
相关推荐
svg加snap.svg.js能做出饼状图,柱状图,折线图,svg事件和js事件的结合,svg坐标
全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...
SVG与html的交互(svg的js与html的js互调用)
svg转css,css转svg,svg与css互相转换并压缩
SVG与html的交互(svg的js与html的js互调用).pdf
geojson2svg 给定svg视口大小并映射范围,将geojson转换为svg字符串。 geojson2svg可以用于客户端(在浏览器中)或服务器端(与NodeJs一起使用)。 检查, 比例尺和示例,以证明将geojson转换为地图非常容易。安装在...
本程序是基于SVG实现的电力系统主接线图模动态拓扑,实现了主接线的动态拓扑,在线重合闸等操作。
纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表
react native svg为ios和android上的react native提供svg支持,并为web提供兼容层。
世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 (ad.svg)
SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程SVG教程
可以根据svg教程制作任何想要的svg地图,无需在为找不到svg地图资源而发愁,readme里面有个网站,在网站找到想要的地图,下载整理10分钟即可得到自己想要的地图。
详细介绍了SVG的2D坐标系到3D坐标系的转换原理,给出了转换到3D坐标系后的SVG-3D图形的绘制与操控流程,并以在3D场景中绘制一个正立方体和圆球体为例,介绍了在HTML页面中采用JavaScript创建3D场景和绘制与操控这2个...
Maven坐标:net.arnx:wmf2svg:0.9.8; 标签:arnx、wmf2svg、中文文档、jar包、java; 使用方法:解压翻译后的API文档,用浏览器打开“index.html”文件,即可纵览文档内容。 人性化翻译,文档中的代码和结构保持...
svg转png, svg文件渲染, 使用plutosvg库
你能熟练使用svg中的脚本吗,本文介绍了通过制作svg动画的过程及代码。
基于SVG的远动系统监控画面的设计.pdf基于SVG的远动系统监控画面的设计.pdf
SVG在线编辑器 在线制作SVG图像 演示地址:http://test.dmscn.net/2241450/ svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们可以直接用代码来描绘图像,可以用...