如果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. hdu 2083

    ps:N个数中,中位数是最小距离...第一次WA是因为排序之后最小和最大相加除2...应该是找他们的中位数,而不是中间数. 代码: #include "stdio.h" #incl ...

  2. Manacher算法 , 实例 详解 . NYOJ 最长回文

    51 Nod http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1089 Manacher 算法 定义数组 p[i]表示以i为 ...

  3. 爬虫再探之mysql简单使用

    在爬取数据量比较大时,用EXCEL存取就不太方便了,这里简单介绍一下python操作mysql数据库的一些操作.本人也是借助别人的博客学习的这些,但是找不到原来博客链接了,就把自己的笔记写在这里,这里 ...

  4. UNION语句查询(转载)

    联合查询   在对数据信息进行操作时,有时需要将不同数据表中的数据信息组合在一起,这时需要使用联合查询.联合查询指的是将多表中的行数据组合在一个数据集中进行显示.本节将讲解有关联合查询方面的相关知识. ...

  5. 自定义Session类实现

    public class CustomizeSession { private HttpSessionState _sesssion = HttpContext.Current.Session; pu ...

  6. 内存回收,Dispose,Close,Finalie(C#中的析构函数)

    NET中的资源分托管和非托管,所谓的托管是指CLR(通用语言运行时)中进行管理的资源,它可以由CLR自动进行内存回收. 也就是大家熟知的GC(垃圾回收机制). 而对于 非托管资源,比如数据库连接,CO ...

  7. 【Avalon源码】dateGetter

    function dateGetter(name, size, offset, trim) { return function(date) { var value = date["get&q ...

  8. python---解决“Unable to find vcvarsall.bat”错误

    安装某些module时发生常见的 Unable to find vcvarsall.bat 错误 在eddsn找到了“Unable to find vcvarsall.bat” error when ...

  9. Linux系统下查看硬件信息命令大全

    导读 有许多命令可以用来查看 Linux 系统上的硬件信息.有些命令只能够打印出像 CPU 和内存这一特定的硬件组件信息,另外一些命令可以查看多种硬件组件的信息. 这个教程可以带大家快速了解一下查看各 ...

  10. safari穿越到chrome

    tell application "Safari" set theURL to URL of front document set the clipboard to theURL ...