• SVG坐标系统与坐标转换
    时间:2014-07-24?? 作者:佚名?? 出处:互联网

    这一章非常基础,非常重要,同时也是相对比较难懂一点的,特别是ViewBox与视口的关系

    1.坐标系统与视口(ViewPort)

    SVG中的坐标系统也是由横坐标轴(X轴)、纵坐标轴(Y轴)和原点组成,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)";

    例子:





    ???? xmlns:xlink="http://www.w3.org/1999/xlink">
    ???
    ???????
    ???

    ???
    ???????
    ???

    ???
    ???????
    ???



    所有圆的初始圆心位置都要是相同,不进行平移变换,它们应该是重叠在一起。进行平移变换后,它们在新的坐标位置进行渲染。

    3.2 旋转变换


    语法:Transform="rotate(angle cx,cy)"
    "angle"是旋转的角度,默认单位是度,正值为顺时针旋转,负值为逆时针旋转;(cx,cy)为旋转中心坐标,如果该坐标省略,刚默认为原点坐标(0,0)。
    基本用法同上

    3.3伸缩变换

    语法: Transform="scale(sx,sy)"
    sx和sy分别表示X轴方向和Y轴方向拉伸和缩放的比例系数。比例系数大于1是拉伸,小于1是缩小。
    基本用法同上

    3.4歪斜变换


    语法:Transform="skewX(Xangle)"或者Transform="skewY(Yangle)"
    Xangle是没X轴歪斜的角度,Yangle刚是没Y轴歪斜的角度,均为实数.
    基本用法同上

    3.5矩阵变换


    以上介绍的4种坐标变换的数学基础是矩阵的计算,也就是说坐标变换的是一种矩阵变换,这些特殊的坐标变换都是可以用矩阵变换来表示,矩阵变换是它们通用的表达方式。是最灵活的一种
    语法:Transform="matrix(a b c d e f)"
    如果大家有兴趣可以去查阅相关的资料,在此就不详细描述。

    网友留言/评论

    我要留言/评论

    相关文章

    NetCDF 网络通用数据格式入门:NetCDF(network Common Data Form)网络通用数据格式是由美国大学大气研究协会(University Corporation for Atmospheric Research,UCAR)的Unidata项目科学家针对科学数据的特点开发的,是一种面向数组型并适于网络共享的数据的描述和编码标准。对程序员来说,它和zip、jpeg、bmp文件格式类似,都是一种文件格式的标准。netcdf文件开始的目的是用于存储气象科学中的数据,现在已经成为许多数据采集软件的生成文件的格式。利用NetCDF可以对网格数据进行高效地存储、管理、获取和分发等操作。由于其灵活性,能够传输海量的面向阵列(array-oriented)数据,目前广泛应用于大气科学、水文、海洋学、环境模拟、地球物理等诸多领域,例如,NCEP(美国国家环境预报中心)发布的再分析资料,NOAA的CDC(气候数据中心)发布的海洋与大气综合数据集(COADS)均采用NetCDF作为标准。
    将会改变未来IT世界的十种编程语言:这里要说的都是革新,说这些的目的就是要保持关注最新技术。如果你是一个程序员,想要探寻未来技术,那这篇文章就是你的必读之选。我们这里列出了10种编程语言,10种将会改变IT世界工作方式的编程语言。这些语言已经在开始改变IT界的景象。看看吧:
    理解TCP为什么需要进行三次握手:三次握手(three times handshake;three-way handshaking)所谓的“三次握手”即对每次发送的数据量是怎样跟踪进行协商使数据段的发送和接收同步,根据所接收到的数据量而确定的数据确认数及数据发送、接收完毕后何时撤消联系,并建立虚连接。为了提供可靠的传送,TCP在发送新的数据之前,以特定的顺序将数据包的序号,并需要这些包传送给目标机之后的确认消息。TCP总是用来发送大批量的数据。当应用程序在收到数据后要做出确认时也要用到TCP。 本文将用白话的方式给读者解释TCP的三次握手。
    如何在局域网内抢带宽:事情的起因是最近家里买了一台60寸的智能电视,支持点播(VOD)功能,家里的网络带宽理论上只有4M,在播放的时候,就会占用大量网络带宽,导致我同时上网浏览网页都很困难。
    阅读好体验的准则:100% Easy-2-Read:大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是什么呢?如果我们稍作思考就会发现,没有理由将如此多的信息都硬塞进一个小小的屏幕当中。其实,这只是一个历史遗留问题,因为过去的时候屏幕真的是很小。
    不要告诉我你懂margin:你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?……
    高性能网站的十四条黄金法则:许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在6~8秒之间。这就是说,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能,大部分访问者最终都会离你而去。
    SEO关于URL优化的一些经验:URL在搜索结果列表中时显示内容之一。设计网站结构时需要对目录及文件命名系统做事先规划。总的原则是首先从用户体验出发,URL应该清晰友好、方便记忆,然后才考虑URL对排名的影响。具体可以考虑以下几个方面。
    搜索引擎高排名的8步骤:对于网上业务,网站和博客一样,在搜索引擎中的排名高是必须的。有机搜索结果是相关的网页出现在搜索引擎结果页面在回应关键字搜寻字词。结果是不带偏见,而不是生成的基础上的付费广告。当你的网站排在各大搜索引擎,像谷歌,雅虎和Bing高,您的网站的网址,标题和描述的结果页上可见。获得了坚实的搜索引擎的地位,意味着你的网站是一个权威和流行的在线源。
    解构科技博客:一直压着没发,之前写知乎时就写完这篇东西了,今天突发灵感就修改一些东西发出来了,可能以后写东西的方向会改变,不再是这类大而泛的文章了。