如果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. linux上安装mysql

    linux下mysql 最新版安装图解教程 1.查看当前安装的linux版本 命令:lsb_release -a 如下图所示 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载R ...

  2. 数据结构《13》----二叉树 Morris 前序遍历

    三种二叉树的后序遍历的方法: 1. 递归                      O(n) 时间复杂度, O(n) 空间复杂度 2. 迭代(用栈)       O(n) 时间复杂度, O(n) 空间 ...

  3. Thread和Service应用场合的区别

    Thread和Service的区别: 1) Thread 是程序执行的最小单元,它是分配CPU的基本单位,可以用 Thread 来执行一些异步的操作. 如果是Local Service,那么对应的 S ...

  4. office2010安装Microsoft Office Document Imaging (MODI) 图解

    office2010安装Microsoft Office Document Imaging (MODI) 图解     Microsoft Office 2010 中删除了 Microsoft Off ...

  5. Quirks模式是什么?

    什么是DOCTYPE: DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的 位置 ...

  6. WPF Step By Step -基础知识介绍

    回顾 上一篇我们介绍了WPF基本的知识.并且介绍了WPF与winform传统的cs桌面应用编程模式上的变化,这篇,我们将会对WPF的一些基础的知识做一个简单的介绍,关于这些基础知识更深入的应用则在后续 ...

  7. 【转】关于iPhone界面适配详细版本

    对于上面哪一张适配图很多人不了解什么意思,现在我就慢慢地解释一下. 下面我们观看一下我们需要的几张效果图 3GS手机 iPhone 4/4S iPhone 5/5c/5s iPhone 6 iPhon ...

  8. Magento后台订单显示产品图片的修改方法

    Magento后台订单原来是没有显示产品图片,客服业务还得到网站前台查找这个产品的图片提供给发货部,这样是很不方便的.为提高工作效率,应客服业务要求,现对Magento后台订单进行修改,使订单页面就显 ...

  9. highcharts 的使用实例:待写

    http://www.hcharts.cn/demo/index.php 方法一:在Axis(包括xAxis和yAxis)有一个属性tickInterval,number类型,表示间隔,也就是间隔多少 ...

  10. Pike学习笔记

    Pike的安装(Ubuntu环境) pike的语法非常像C++,但是它也是脚本语言,所以具有一般脚本语言的特性.一个简单的pike程序,hello world: int main() { write( ...