SVG ViewBox属性介绍

　　"viewBox"的作用是规定视口的坐标范围，范围重新定义后，缺省的坐标度量单位也会改变。本篇文章介绍了SVG ViewBox属性，并且通过SVG ViewBox实例代码及演示理解SVg ViewBox。

　　视口初始化后的两个坐标系是一致的，如果我们定义的SVG图形太大或者太不了，就可以使用“ViewBox“属性，重新定义视口的坐标范围，从而使默认的坐标度量单位也会随着改变。“ViewBox”属性的4个参数分别对应的是：左上角X坐标、左上角Y坐标、ViewBox的宽度和ViewBox的高度。请看下面这个<svg>元素的定义：

　　如果没有定义“ViewBox”属性，那么视口宽度是3厘米，但是定义中出现了“ViewBox”属性，重新定义了坐标范围至(0 0 300 300)，那么默认的用户坐标系度量单位试不是0.01cm。也可以理解成把客户端(0，0)到(300，300)区域内的图形都放到SVG定义的3cm×3cm的矩形区域内，那么SVG的3cm到了客户端就相当于被300个像素“瓜分”，每个像素分到0.01cm。

　　ViewBox的使用实例的代码：

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="200" viewBox="0 0 1500 1000">
    <rect x="0" y="0" width="1500" height="1000"
        style="fill:rgb(255,255,0);stroke:rgb(0,0,255);stroke-width:12"/>
    <path d="M750 100 L250 900 L1250 900 z"
        style="fill:rgb(255,0,0)"/>
</svg>

　　该实例中，我们定义了一个矩形和一个三角形的闭合路径，定义的坐标都非常大，都达到了1000多，需要整体缩小，使用“ViewBox”属性把坐标范围先进行一个限定，然后修改“width"和"height"属性的大小即可，ViewBox的使用实例的效果如下：

　　ViewBox属性与SVG的坐标系统有着密切的关连，你可以通过“SVG格式图形显示的坐标系统规则”一文获得详细的介绍。在SVG的客户端解释程序获得一些信息后（设备像素数所定义的高度值、宽度值，一个像素所代表的具体尺寸这样三个参数），首先初始化视口，建立以像素为单位的视口坐标系，接着建立用户坐标系，使两者一致，也就是使用户坐标系中的一个单位（如1m或1cm）等于视口坐标系中的一个像素。

(THE END)

SVG中国

SVG ViewBox属性介绍

将要更新