如果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. 顺序表（C++）

    以下为数据结构中的顺序表实现代码,已测试能够运行.虽然说是C++版的,但是其实应该是C语言班的.C++应该是面向对象,用抽象方法实现,而以下代码是面向过程的,只是把C语言中的输入(scanf)和输出( ...

  2. Python 练习册--生成唯一激活码(邀请码)

    题目是这样子的: 做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券),使用 Python 如何生成 200 个激活码(或者优惠券)? 分析 其实要生成 ...

  3. PHP 安全

    作为PHP程序员,特别是新手,对于互联网的险恶总是知道的太少,对于外部的入侵有很多时候是素手无策的,他们根本不知道黑客是如何入侵的.提交入侵.上传漏洞.sql 注入.跨脚本攻击等等.作为最基本的防范你 ...

  4. magento additional & details 分解开来

    <?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?& ...

  5. magento关于站点搬家，换空间

    1,先把原来空间的文件全部压缩后(有些不要的就不要压缩)下载下来,然后传到新空间去,注意下载下来后核对一下是否大小一样,建议使用ftp工具下载, 2,同样把原来空间的数据库打包下来,再在新空间创建一个 ...

  6. C# 添加图片资源

    /********************************************************************** * C# 添加图片资源 * 说明: * 个人觉得图片资源 ...

  7. shell脚本 gawk语言 综采话单 对账 字段核对

    今天被分配到对账组下的字段程序的了解和修改,在 SecureCRT 下的 run.sh 是字段对账的主程序,其中run.sh文件中含有gawk的代码. 程序的主要功能为 有两个文件夹 source存的 ...

  8. Linux系统入门学习：在CentOS上安装phpMyAdmin

    问题:我正在CentOS上运行一个MySQL/MariaDB服务,并且我想要通过网络接口来用phpMyAdmin来管理数据库.在CentOS上安装phpMyAdmin的最佳方法是什么? phpMyAd ...

  9. sql server导入mdf 报操作系统错误 5:“5(拒绝访问。)”

    错误一:拒绝访问 在安装示例库时出现以下的错误 消息 5120,级别 16,状态 101,第 1 行无法打开物理文件"D:\Download\AdventureWorks2012_Data. ...

  10. ZSDR100 跑原材料MRP

    *&---------------------------------------------------------------------**& Report ZSDR100*&a ...