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. RxJava简单的介绍

    1. RxJava简介 Rx(ReactiveX,响应式编程)是一种事件驱动的基于异步数据流的编程模式,整个数据流就像一条河流,它可以被观测(监听),过滤,操控或者与其他数据流合并为一条新的数据流.而 ...

  2. PostgresSQL的安装与基本命令使用

    安装与配置 yum install http://yum.postgresql.org/9.5/redhat/rhel-7-x86_64/pgdg-redhat95-9.5-2.noarch.rpm ...

  3. C语言 完美字符串

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...

  4. 基础知识《十》java 异常捕捉 ( try catch finally ) 你真的掌握了吗？

    本文转载自  java 异常捕捉 ( try catch finally ) 你真的掌握了吗? 前言:java 中的异常处理机制你真的理解了吗?掌握了吗?catch 体里遇到 return 是怎么处理 ...

  5. 备份了我的CSDN博客

    刚用cnblogs的“博客搬家”功能把我此前在csdn发的所有文章都备份过来了. 发现cnblogs的博客备份功能比较好的一点是——文章的发表时间和原来的一致! 上次在CSDN发博客的时间是2015- ...

  6. centos 6.5 安装django

     首先做这个:python安装setuptools   http://blog.csdn.net/zhuying_linux/article/details/8167430  CentOS下将2.6升 ...

  7. 在input中放对象

    var input = $("<input type='hidden' class='hidden-user'/>"); $(input).data("ran ...

  8. (转载)org.springframework.web.context.ContextLoaderListener

    http://www.yihaomen.com/article/java/471.htm 刚才手贱乱点了下,然后好像jar包不见了还是什么的,出现了这个错误,按照帖子说的,手动添加maven进去就好了

  9. JDBC、DAO

    JDBC是Java数据库连接技术的简称,提供连接各种常用数据库的能力 JDBC的工作原理 JDBC 驱动器由数据库厂商提供 1.在个人开发与测试中,可以使用JDBC-ODBC桥连方式 2.在生产型开发 ...

  10. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...