2. svg学习笔记-svg中的坐标系统和viewbox

时间:2022-03-30 14:47:43

我是通过《SVG精髓》这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口。以前老师给我们API文档的时候一直是英文的,我们问他为什么不给中文版的,英文版的看起来费劲,老师说原版的你们能看懂,翻译过来就看不懂了,现在是深有领会啊\(^o^)/~

废话说完,来看正事,svg的坐标系统和大多数绘图的坐标系统一样,左上角为原点,从左向右x轴递增,从上到下y轴递增。这本没什么好说的,大家都知道,但是奇葩的是<svg>元素有个属性叫viewbox就比较扯淡了,要是自己研究这个东西真还有点儿费劲,下面开始详谈~~~

<svg>元素的属性width和height分别指定svg的宽和高,值为数字或者是百分比。当值是数字时可以带上单位,有如下可选单位:em(默认字体的大小16px),ex(字母x的高度),px(像素),pt(点 1/72英寸),pc(12点 1/6英寸),cm(厘米),mm(毫米),in(英寸),不带单位时默认为px,当取值为百分比时通过父元素的宽高确定。单位可以混用,也就是说可以指定元素的width单位为px,height为pt;父元素单位为mm,子元素为px。

看一个例子,编写如下的svg:

<svg width="200" height="200" style="border:1px solid #000000">
    <rect x="10" y="10" width="100" height="100" style="stroke:blue; fill:blue">
    </rect>
</svg>

在网页上会呈现如下效果:

2. svg学习笔记-svg中的坐标系统和viewbox

解释下上面的代码,设置<svg>元素的宽和高都为200像素,在网页上就表现为这个svg图像占据网页空间的宽200px高200px,再设置样式:边框样式为1像素黑色实线,<rect>元素嵌套在<svg>元素中,表明svg中绘制一个矩形,设置rect元素的x为10,y为10,表示要绘制的矩形的左上角顶点的坐标为(10,10),设置width为100,height为100,表示矩形的宽高都是100像素,再设置边框和填充颜色都是蓝色。

再来说一下这个viewbox属性,设置这个属性相当于给svg图像设置了一个选区,然后将这个选区填充到整个svg画布中,最后的你看到的结果就是选区中的图像放大或缩小的结果。这个属性有四个值,分别为坐标系统中的x值,y值,宽度,高度,属性值之间用空格或者是逗号合开。实际上这4个值唯一的确定了一个矩形和矩形的位置,x值和y值是矩形左上角顶点的坐标,宽和高分别是矩形的宽和高,单位为像素,这个矩形就是上述的选区。口说无凭,上实例,编写以下的代码:

<!DOCTYPE html>
<html>
<head>
    <title>svg</title>
</head>
<body>
    <svg width="300" height="300" viewbox="0 0 300 300" style="border:1px solid #000000">
        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">
        </rect>
    </svg>
    <svg width="300" height="300" style="border:1px solid #000000">
        <rect x="10" y="0" width="1" height="1" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="10" width="1px" height="1px" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="20" width="1mm" height="1mm" style="stroke:blue; fill:blue">
        </rect>

        <rect x="10" y="30" width="1cm" height="1cm" style="stroke:blue; fill:blue">
        </rect>
    </svg>
</body>
</html>

在网页中呈现如下结果:

2. svg学习笔记-svg中的坐标系统和viewbox

以上代码为第一个svg设置了viewbox属性,但是结果并没有不同,这是因为我将第一个svg的viewbox属性设置为了"0 0 300 300",这表示选区是整个svg图像,所以并没有变化,将上述代码中的第一个svg中的viewbox属性设置为"0 0 150 150",结果如下:

2. svg学习笔记-svg中的坐标系统和viewbox

很明显第一个图像中的每个矩形的长宽均是第二个图像的两倍,不信你可以把图片保存下来用ps测一下。出现这样的原因是我将第一个图像的选区设置为宽高均为150像素,左上角顶点为坐标原点的矩形,此矩形正好是图像的二分之一,经放大后填充在300×300的图像中,所以图像放大了二倍。再将上述代码中的第一个svg中的viewbox属性设置为"0 0 100 100",结果如下:

2. svg学习笔记-svg中的坐标系统和viewbox

如你所料,第一个图像中的每个矩形的长宽均是第二个图像的三倍,好了,吹牛完毕O(∩_∩)O哈哈~