SVG的座标变换transform

这几天用svg画图，发现svg的座标变换有些复杂。

这里有一个例子，在将原始座标系转为用户座标系时比较有用。

记录下来：

1. 蓝色为原始svg座标系；原点为左上角，x正方向向右， y正方向向下；

2. 经过变换，<g transform="translate(0,200) scale(1,-1)">，用户座标系为红色部分，原点可以看成是左下角。

3. 图中绿色，与黄色的矩形是50*50（为了看清，将大小差异了5个单位），可以从用户座标系角度思考画出。也可以考虑继续平移画出。后一种方式在用于先在图上点击，获得当前图形的中心点位置，然后再画出图形时比较有用。

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=300 height=200><rect x="0" y="0" width="300" height="200" style="stroke-Width:5;stroke:blue;fill:grey" /> <!-- svg 边界 ，左上角为圆点 --><g transform="translate(0,200) scale(1,-1)"> <!-- 座标变换后，左下角为圆点.--><rect x="0" y="0" width="200" height="150" style="stroke-Width:5;stroke:red;fill:grey" /> <!-- 新的用户座标系的边界 --><!-- 在新座标系中，在(100，75)处画个50*50的矩形 --><rect x="100" y="75" width="50" height="50" style="stroke-Width:5;stroke:green;fill:grey" /><g transform="translate(100,75)"><g transform="translate(-25,-25)><rect x="0" y="0" width="50" height="50" style="stroke-Width:5;stroke:green;fill:grey" /></g></g></g>
</svg></body>
</html>

SVG的座标变换transform相关推荐

css变换transform 以及行内元素的一些说明
变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样] #test { transform: transl ...
Snap svg：路径变换和相交计算
Snap.svg对原生的svg进行了封装,为svg的创建.操作提供了便捷的方法,但是官网的文档对一些概念没有解释,难免会造成困扰.比如说路径的旋转,就存在变换后得不到路径交点的问题. 用普通的变换得不 ...
CSS_变换(transform)
文章目录什么是变换 Appendix 水平垂直居中(2) 怎样看MDN的语法格式什么是变换变换也叫转换(翻译不同而已). 转换可以让一个block元素位移或者变形.(inline元素不支持) t ...
Flutter变换Transform
Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效.Matrix4是一个4D矩阵,通过它我们可以实现各种矩阵操作, Container(margin: const EdgeIns ...
傅立叶变换(Fourier Transform)分析理解
引言关于傅立叶变换,无论是书本还是在网上可以很容易找到关于傅立叶变换的描述,但是大都是些故弄玄虚的文章,太过抽象,尽是一些让人看了就望而生畏的公式的罗列,让人很难能够从感性上得到理解,最近,我偶尔从 ...
详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换有一定的了解其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
SVG animation 回顾
想起来学习SVG动画完全是因为做比赛时,需要用到沿着运动路径运动,作为一个前端萌新,css3显然无法做到,就现学了SVG动画. 一. SVG animation元素 <set> <a ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
transform你不知道的那些事
transform是诸多css3新特性中最打动我的,因为它让方方正正的box module变得真实了. transform通过一组函数实现了对盒子大小.位置.角度的2D或者3D变换.不过很长时间内,我 ...

SVG的座标变换transform

SVG的座标变换transform相关推荐

最新文章

热门文章