如果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. Asp.Net中Ajax实现登陆判断

    Default.aspx: <head runat="server"> <title>无标题页</title> <script type= ...

  2. 封装数据库mysql, mysqli

    <?php header("content-type:text/html;charset=utf-8"); class db{    //私有的静态属性    private ...

  3. Investment_完全背包

    Description John never knew he had a grand-uncle, until he received the notary's letter. He learned ...

  4. POJ3237 (树链剖分+线段树）

    Problem Tree (POJ3237) 题目大意 给定一颗树,有边权. 要求支持三种操作: 操作一:更改某条边的权值. 操作二:将某条路径上的边权取反. 操作三:询问某条路径上的最大权值. 解题 ...

  5. Unity3D ShaderLab 各向异性高光

    Unity3D ShaderLab 各向异性高光 各向异性时一种模拟物体表面沟槽方向性的高光反射类型,它会修改或延伸垂直方向上的高光.当我们想模拟金属拉丝高光的时候,它非常适合.下面就一步一步实现. ...

  6. HDU 3357

    http://acm.hdu.edu.cn/showproblem.php?pid=3357 给出公司间的控股关系,问有多少组不合法数据,自己控股自己不合法,a控股b,b控股c,则a控股c 其实就是找 ...

  7. Http权威指南（一）---读书笔记

    Chart1 ====概述==== 最简单的的资源是web服务器文件系统中的静态文件.当然可以上动态,但要经过网关?(不确定) 下面见图: 2.  URI(uniform Resource Ident ...

  8. Examining Open vSwitch Traffic Patterns

    In this post, I want to provide some additional insight on how the use of Open vSwitch (OVS) affects ...

  9. java中byte数据转换为c#的byte数据

    最近在做下载方面的开发.有一个需求,就是读取要下载的文件中的一些数据,比如要读取这个文件包含的用户信息,但是怎么读都不对.后来搞了很久才发现,服务器上的文件里的用户信息,用C#写的存储方法来存储的,而 ...

  10. 读metronic文档学到的几个知识点

    1.RTL  同样的页面,它做了两套.为什么,因为在这个世界上,有些民族,有些语种,是从右向左来的. 2. google material design 同样的一套东西,又分别做了google mat ...