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

时间 2019-11-17

标签 svg 学习笔记坐标系统 viewbox 繁體版

原文原文链接

我是经过《SVG精髓》这本书学习的svg，说实话，这本书写的很差，或者说翻译的很差，我没有看过这本书的原版，不知道原文写的怎么样，可是翻译出来的有些句子真的很拗口。之前老师给咱们API文档的时候一直是英文的，咱们问他为何不给中文版的，英文版的看起来费劲，老师说原版的大家能看懂，翻译过来就看不懂了，如今是深有领会啊\(^o^)/~html

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

看一个例子，编写以下的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>

在网页上会呈现以下效果：spa

解释下上面的代码，设置<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值是矩形左上角顶点的坐标，宽和高分别是矩形的宽和高，单位为像素，这个矩形就是上述的选区。口说无凭，上实例，编写如下的代码：3d

<!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>

在网页中呈现以下结果：code

以上代码为第一个svg设置了viewbox属性，可是结果并无不一样，这是由于我将第一个svg的viewbox属性设置为了"0 0 300 300"，这表示选区是整个svg图像，因此并无变化，将上述代码中的第一个svg中的viewbox属性设置为"0 0 150 150"，结果以下：htm

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

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

1. SVG坐标系统学习笔记
2. SVG坐标系统
3. svg的坐标系统
4. svg的viewport和viewbox
5. svg中的viewbox和preserveAspectRatio
6. svg: 坐标系统变换
7. canvas与svg中的坐标系统
8. SVG中的坐标系统和坐标变换
9. SVG的viewBox
10. 深刻理解SVG坐标体系和transformations- viewport, viewBox,preserveAspectRatio
更多相关文章...
• SVG - SVG 教程
• SVG - SVG 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议