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. -webkit-box-flex被内容撑开了

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Design Tiny URL

    Part 1: 前言: 最近看了一些关于短址(short URL)方面的一些博客,有些博客说到一些好的东西,但是,也不是很全,所以,这篇博客算是对其它博客的一个总结吧. 介绍: 短址,顾名思义,就是把 ...

  3. Windows10系统如何更改程序的默认安装目录？

    Windows10系统如何更改程序的默认安装目录? 在Windows10系统的使用中,软件程序的默认安装目录是:C:\Program Files\...或者C:\Program Files(x86)\ ...

  4. 如何将 Windows Server 2012 r2 打造成 Windows 8.1？

    Server 系列相对于桌面系统Windows 8.1 .嵌入式系统Embedded 8.1来说,还是有所不同的,有其独特性,所以,标题写着“打造”充其量不过是不断接近的意思.还有很多地方存在进一步深 ...

  5. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  6. gdb 调试多线程

    基本i threads 等操作略过,只谈线程同步.异步控制: 先点到,gdb attach到主线程t1 时,所有线程都会停止,所谓同步异步效果,是指在apply continue到所有线程之后, 再切 ...

  7. 搭建Android开发环境附图详解+模拟器安装（JDK+Eclipse+SDK+ADT）

    ——搭建android开发环境的方式有多种,比如:JDK+Eclipse+SDK+ADT或者JDK+Eclipse+捆绑好的AndroidSDK或者Android Studio. Google 决定将 ...

  8. Vue学习笔记（一）

    组件:分三步 创建组件: var myComponent = Vue.extend({ template:'<div>This is my first component</div& ...

  9. cout 格式化输出

    一直习惯于C语言的printf函数来打印,突然有一天要用cout来打印,发现有点不适应. 原来cout也是有格式化输出的. 首先要引入头文件 #include<iostream> // 在 ...

  10. iOS 自动追加版本时间版本号脚本

    buildNumber=$(/usr/libexec/PlistBuddy -c "Print :CFBundleVersion" "${PROJECT_DIR}/${I ...