SVG ViewBox
如果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的更多相关文章
- SVG viewBox & coordinate system
SVG viewBox & coordinate system https://codepen.io/xgqfrms/pen/abOOrjp <html> <body> ...
- SVG (viewBox) & DOM (viewport)
SVG (viewBox) & DOM (viewport) circle "use strict"; /** * * @author xgqfrms * @license ...
- 理解SVG的viewport,viewBox,preserveAspectRatio
万丈高楼平地起,基础很重要. viewport 表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小. <svg width="500" height="30 ...
- Art-Directing SVG图像viewBox属性
Art-Directing SVG图像viewBox属性 作者:彦子 日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...
- SVG:textPath深入理解
SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...
- SVG动画
动画原理 SVG动画,就是元素的属性值关于时间的变化. 如下图来说,元素的某个属性值的起始值(from)到结束值(to)在一个时间段(duration)根据时间函数(timing-function)计 ...
- SVG坐标系统
SVG的画布.画布视区(viewBox).浏览器视窗的概念 画布 画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...
- HTML中的SVG
HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
随机推荐
- 2016-1-3点菜系统demo的实现,pickerView的学习
// // ViewController.m // pickView // // Created by Mac on 16/1/3. // Copyright © 2016年 Mac. All rig ...
- php大力力 [025节] 来不及学习和分类的,大力力认为有价值的一些技术文章合集(大力力二叔公)(2015-08-27)
php大力力 [025节] 来不及学习和分类的,大力力认为有价值的一些技术文章合集(大力力二叔公)(2015-08-27) 比较好的模版 免费模板网,提供大量DIV+CSS布局网页模板下载及后台管理 ...
- 数据结构《10》----二叉树 Morris 中序遍历
无论是二叉树的中序遍历还是用 stack 模拟递归, 都需要 O(n)的空间复杂度. Morris 遍历是一种 常数空间 的遍历方法,其本质是 线索二叉树(Threaded Binary Tree), ...
- XAMPP Apache 配置多端口和多域名方法
我们在工作中经常遇到同时调试多个网站的情况,那么如何配置呢?就像平时访问网站一样,网站 a.com 与网站 b.com 截然不同.这都是常见现象,如果在局域网中要访问另外一台电脑上的多个网站,就需要使 ...
- JS手机定位地理位置
/** * 以下为html5代码,获取地理位置 */ /** * 设置地址 */ function setAddress(json) { var position = document.getElem ...
- ZOJ2006 (最小表示法)
var s:ansistring; cas:longint; function minp(st,len:longint):longint; var p1,p2,k,tmp:longint; begin ...
- min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
- 【转】Fiddler 教程
原文转自:http://www.cnblogs.com/tankxiao/archive/2012/02/06/2337728.html Fiddler是最强大最好用的Web调试工具之一,它能记录所有 ...
- 脚本语言&& Performance Testing
watin: http://www.cnblogs.com/dahuzizyd/archive/2007/04/13/ruby_on_rails_windows_instatnrails_study_ ...
- 打开office弹出steup error 的解决办法
找到 C:\Program Files\Common Files\Microsoft Shared\OFFICE12\Office Setup Controller 将这个文件夹删除