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

均是如此）如下图：