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. 生产环境中，数据库升级维护的最佳解决方案flyway

    官网:https://flywaydb.org/ 转载:http://casheen.iteye.com/blog/1749916 1.  引言 想到要管理数据库的版本,是在实际产品中遇到问题后想到的 ...

  2. Eclipse导出插件工程

    一.Feature Projecties工程设置 1. 新建一个Feature Projecties 2. 选择我们的插件工程,finish 3. 在目录下新建一个Category definitio ...

  3. hosts 屏蔽百度

    127.0.0.1 localhost  cpro.baidu.com vie.baidu.com  cpro.baidu.com  ubmcmm.baidustatic.com  uumcmm.ba ...

  4. js日期相关

    时间戳转正常日期时间 1469512964000 —> 2016/7/26 下午2:02 var getLocalTime = function(nS) { // 13位时间戳 return n ...

  5. appStore上传苹果应用程序软件发布流程

    如有疑问,或者需要人帮忙,可以到QQ群:460325065首先确定帐号是否能发布, https://developer.apple.com/account,如果你打开Provisioning Port ...

  6. sh4.case语句

    case ... esac 与其他语言中的 switch ... case 语句类似,是一种多分枝选择结构.case 语句匹配一个值或一个模式,如果匹配成功,执行相匹配的命令.case语句格式如下: ...

  7. OpenGL中坐标系的理解（一）

    在OpenGL中,存在着至少存在着三种矩阵,对应着函数glMatrixMode()的三个参数:GL_MODELVIEW,GL_PROJECTION,GL_TEXTURE. 以下主要描述GL_MODEL ...

  8. CSS垂直居中

    一.单行文本垂直居中: 设置其文本的行高line-height与其父容器高度相等即可.如 <style> .test{ background-color: grey; line-heigh ...

  9. android 去掉actionbar 的虚线

    if(Build.VERSION.SDK_INT>=21){ getSupportActionBar().setElevation(0); }

  10. LeetCode之461. Hamming Distance

    ------------------------------------------------------------------ AC代码: public class Solution { pub ...