如果svg图形太大或者太小，就可以用ViewBox属性来调整在页面中的显示范围、大小。

“像素不能直接换算成英寸、厘米，要在 dpi （ dot per inch 分辨率，概念较多，鼠标 dpi ，打印机 dpi等，各有不同）下才能换算。”和我想的一样，这样可能会有个问题： svg 的显示在各种不同分辨率显示器上的表现可能不同——显示可能不全。用 svg 属性能“拯救”—— <svg width="50cm" height="25cm" viewBox="0 0 2050 1000" > ：

意思是 svg 图形的 2050px ， 1000px 范围，显示到 50cm,25cm 的视口， 0 ， 0 是在视口中的起点坐标。 FireFox3.6 下坐标系和下图相反，坐标系建立在 svg 图形上。

根据实验，（ svg 图形通过 embed 嵌入 html 页面 ）图形大小调整 viewBox 后两位即可，调整前两位不起大小作用。

视口的理解：我们从视口看 svg 图形，就好像从窗口看外面的风景。

这样可以通过脚本来调整大小： html 页面上设置两个按钮，用放大缩小。看实际情况，不一定用到这个。

viewBox="0 0 2050 1000" 的前两位参数对于以 embed 标签嵌入 html 页面的 SVG 图形的坐标效果（坐标系建立在浏览器页面上， SVG 图形在坐标系上移动， viewBox 前两位参数依次是 x y ），（FF3.6+ 原生 SVG 解释器 & ASV3 均是如此）如下图：

SVG ViewBox的更多相关文章

  1. SVG viewBox & coordinate system

    SVG viewBox & coordinate system https://codepen.io/xgqfrms/pen/abOOrjp <html> <body> ...

  2. SVG (viewBox) & DOM (viewport)

    SVG (viewBox) & DOM (viewport) circle "use strict"; /** * * @author xgqfrms * @license ...

  3. 理解SVG的viewport,viewBox,preserveAspectRatio

    万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...

  4. Art-Directing SVG图像viewBox属性

    Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...

  5. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  6. SVG动画

    动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...

  7. SVG坐标系统

    SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

  8. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  9. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

随机推荐

  1. nginx添加未编译安装模块

    链接:http://taokey.blog.51cto.com/4633273/1318719

  2. java互斥方法

    synchronized,  lock/unlock,  volatile类型变量, atom类, 同步集合,  新类库中的构件: CountDownLatch\CyclicBarric\Semaph ...

  3. linux命令：rm

    1.介绍: rm用来删除文件或者目录,对于链接文件,只删除了链接,不删除源文件.rm是一个非常危险的命令,像rm -rf /这个命令运行后,后果不堪设想. 2.命令格式: rm [选项] 文件/目录 ...

  4. 破解 crackme（完全拆解警告窗口）

    系统 : Windows xp 程序 : crackme 程序下载地址 :http://pan.baidu.com/s/1kUrbcAr 要求 : 注册机编写 & 去除Nag窗口 使用工具 : ...

  5. 如何从oc中去获取一个私有的变量.....

    运行时 的用法 1.定义的一个类,里面有一个私有变量mt_,并且在初始化值为"HaHa Ha ".@interface Mobj : NSObject {@privateNSStr ...

  6. 负margin居中

    <!DOCTYPE html><html> <head> <title> new document </title> <meta na ...

  7. C语言----变量及作用域 、 指针 、 指针和数组 、 进程空间 、 字符串

    1 使用程序来模拟放球.取球的问题 1.1 问题 栈是一种特殊的线性表,它的逻辑结构和线性表相同,只是其运算规则较线性表有更多的限制,故又称为运算受限的线性表. 栈的定义是限制仅在表的一端进行插入和删 ...

  8. MySQL 仅保留7天、一个月数据

    /************************************************************************** * MySQL 仅保留7天.一个月数据 * 说明 ...

  9. html 遇到margin居中的问题

    今天在写div时发现不居中, div{ margin:0 auto; } 那么给div一个固定的宽度,就会居中了 div{ margin:0 auto; width:500px; }

  10. JS基础知识（基本类型 引用类型）

    1,js中的  基本类型 引用类型  javascript中有两种变量类型:基本类型和引用类型,基本类型包括:Number.String.Undefined.Null.Boolean这五种,而引用类型 ...