http://tutorials.jenkov.com/svg/svg-coordinate-system.html

svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样

数学/笛卡儿坐标系统

数学中的坐标系统是这样的

原点在左下角

SVG坐标系统

svg的坐标系统 原点在左上角

SVG 坐标系统的单位

你可以指定在SVG坐标系单位。你到处都可以指定一个坐标(x和y位置,宽度和高度等)。您指定的单位价后,例如10厘米或125毫米。

如果不指定任何单位协调值后,单位被认为是像素(px)。

svg 单位列表

em 默认高度,通常是行高 The default font size - usually the height of a character.
ex 一个字母x的高度? The height of the character x
px 像素 最常用的
pt Points (1 / 72 of an inch)
pc Picas (1 / 6 of an inch)
cm Centimeters
mm Millimeters
in Inches

一般用 em 和 px 比较多

【翻译svg教程 】svg 的坐标系统的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  3. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  4. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  5. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  6. svg教程

    实例 <html> <body> <h1>My first SVG</h1> <svg style="border: 1px solid ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记(1)

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  8. HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

     1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js)   也许这么 ...

  9. SVG 2 & SVG & getPointAtLength & getPathSegAtLength

    SVG 2 & SVG & getPointAtLength & getPathSegAtLength getPointAtLength SVG 1.x https://dev ...

  10. 【SVG】SVG的夺命利器——path

    [SVG]SVG的夺命利器--path 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 昨天一发布,突然看到有朋友留言,希 ...

随机推荐

  1. css中margin的应用

    1.margin用于设置外边距,没有继承性,父元素设置的margin属性子元素不会继承. 2.margin存在重叠的问题. 水平边距永远不会发生重叠. 垂直边距在特定情况下会重叠. 重叠问题都很容易解 ...

  2. 高程(4):执行环境、作用域、上下文执行过程、垃圾收集、try...catch...

    高程三 4.2.4.3 一.执行环境 1.全局执行环境是最外层的执行环境. 2.每个函数都有自己的执行环境,执行函数时,函数环境就会被推入一个当前环境栈中,执行完毕,栈将其环境弹出,把控制器返回给之前 ...

  3. 耿丹CS16-2班第七次作业汇总

    Deadline: 2016-11-27 11:59pm 作业内容 第七次作业总结 01.每次成绩发布,麻烦没交作业的同学(暂定得分为-5的),请及时补交: 02.想不出来可以,代码乱成一团不行,命名 ...

  4. PXE+Kickstart+DHCP+TFTP实现无人值守安装操作系统

    PXE+Kickstart+DHCP+TFTP实现无人值守安装操作系统 PXE + Kickstart PXE的工作流程及配置文件 Kickstart的配置文件 Linux安装大致可以分为2个阶段 第 ...

  5. php检测文件内容编码的方法

    核心用到的是mb_convert_encoding函数,示例代码如下: <?php header("Content-type: text/html; charset=utf-8&quo ...

  6. [MySQL]MySQL之权限管理

    一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执行update操作.只允许你从某台机器上连接m ...

  7. dom4j使用总结

    1.加载Xml 从文件加载 SAXReader reader = new SAXReader(); String filePath = "/xmlfile/" + fileName ...

  8. tomcat端口被占用问题完美解决方案!

    启动Tomcat服务器报错:Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are alrea ...

  9. java内存溢出和内存泄露

    虽然jvm可以通过GC自动回收无用的内存,但是代码不好的话仍然存在内存溢出的风险. 最近在网上搜集了一些资料,现整理如下: —————————————————————————————————————— ...

  10. OpenGL实现3D漫游的理解

    这篇文章主要参考以下两篇博客: 推导相机变换矩阵 OpenGL系列教程之五:OpenGL矩阵类 上面的第一篇是理论的讲解,第二篇有实例代码,我在后面会给出自己写的主函数,依赖的类可以从第二篇参考中下载 ...