用SVG编写画布、坐标系统和窗口的方法

本文主要介绍了SVG布局画布、坐标系统和窗口的编写方法。SVG是一种用XML语言编写的矢量图形格式，可供朋友参考。
类比

想象一个无限的画布，你可以在画布的任何部分画你想要的任何东西，你可以画出你想要的任何尺寸。

现在想象一下，有人在你的画布前建造了一个同样巨大的墙，墙壁的宽度和高度也是无限的，这阻碍了画布。

因为所有的墙壁都直接放在画布前面，我们看不到画布的内容，但是建造长城的人非常好，帮助我们打开了一扇窗户，甚至给了我们设置窗口大小的能力，这个窗口就是SVG窗口。

墙上的建筑并没有停在这里，他给我们留下了工具。我们可以用它来移动画布，决定画布的一部分将在窗口区域显示出来，并决定该区域的尺寸来显示。这些工具在属性的形式的SVG元素表示（观片灯和preserveaspectratio）。

我将在接下来的两周内解释这些属性。今天我想把重点放在画布、墙壁、窗口上，首先是他们使用的坐标系统：
SVG坐标系统

虽然SVG和CSS框模型不同，但它们的坐标系统工作方式相同。

所有SVG的起点坐标（0,0）是在父元素的左上角，和它们的父元素可以是身体的元素，div元素，或其他容器。

当你创建一个新的SVG元素，也创造了一个新的坐标系统，无限大的SVG画布。出发点可能与父元素的左上角对齐，但画布无限延伸四面八方，X轴的正方向是正确的，和Y轴正方向是向下的。这两个轴的负方向也延伸到左上。

SVG需要理解的一点是多坐标系统的同时使用，每次创建一个新的SVG元素时，都会在其坐标空间中创建一个新的画布，并创建一个窗口。

每一对画布和窗口的坐标系统默认是一致的。它们看起来是在同一个系统中，但它们不是。正如我们接下来要看到的，你可以改变它们彼此对齐的方式。

事实上，你在无休止的画布上创建的元素放在画布的原点附近，但理论上，它们可以放在任何地方，你可以创建一个圆圈，把它放在原点右边四十亿个像素，没有人阻止你这样做。

从理论上讲，窗口也可以接近无穷大，你可以设置任何你想要的大小。但是，如果你只有一个固定的窗口大小，它可以是一个固定的大小，一旦你设置了大小，坐标系统将保持这个大小的空间。

用户代理程序（或浏览器）默认地将两个坐标系统的原点和坐标轴对齐，但是可以根据需要改变对齐方式。

这两个系统可以在不同的单位设置，可以设置像素，和其他设置为毫米，活字，英寸，点，EMS，或者其他你想要的。百分比是一个例外，它不能用在这里。

记住，两个坐标系，一个在无限大的画布上，另一个在固定的窗口上。
SVG窗口

每次创建一个新的SVG元素时，都会创建一个新的SVG窗口，窗口的大小等于为SVG元素设置的宽度和高度。

CSS代码将内容复制到剪贴板。

在这里，我创建了一个600px宽，300px高窗口。在窗口中，我创建了一个红色的长方形200x100px。因为我不指定单位，我用像素为单位默认。因为这是我通常设置相同，所以我倾向于不指定单位，也快。

为了查看窗口的边界，我还为元素添加了一个大纲，这是代码生成的结果。
你可以看到一个5px厚厚的棕色边框包围一个宽600px高300px地区。该框架的内容窗口。

在窗口，一个宽度200px和高100px是独立的红色矩形。默认情况下，矩形的左上角是放置在SVG画布的起源与窗口的原点对齐。

我有一个问题，如果你没有窗户的宽度和高度，窗户的大小是多少我没有找到一个明确的答案。这是由每个用户代理确定（浏览器），但它似乎是一般300像素，150px默认。然而，我不建议按默认大小的窗口显示，最好是根据自己的需要设置大小。
移动画布上的SVG元素

你可以改变它的位置对SVG画布设置X值和Y值的矩形。这里我设置X值和Y值为10px，你可以看到矩形有左窗口的左上角。

xml代码将内容复制到剪贴板。
使用这种方法来改变x和y坐标的值相当于在SVG画布上绘制的移动物体。画布本身不移动，窗口不移动。我只是在画布上的另一个地方画了一个红色的矩形。

您还可以绘制一个矩形，它是窗口超出窗口边界的一部分。

xml代码将内容复制到剪贴板。

正如你在这里看到的，大部分的矩形是看不见的，只有一小部分仍然可以看到在窗口。事实上，我只是移动了它几个像素，所以在理论上，你可以画矩形在任何地方你喜欢这个无限的画布。
查看窗口外的内容

有一点我不经常提到的是为什么我们不能看到窗口之外的内容，因为SVG元素有一个溢出属性，默认值是隐藏的，窗口以外的任何内容都是隐藏的。

当然，溢出属性也可以设置为其他值，如可见的。

xml代码将内容复制到剪贴板。

将溢出属性的值更改为可见，您可以看到SVG画布的这些部分超出了窗口的内容，包括画布上可以出现在屏幕上的部分（另一个由您创建的浏览器窗口）。
现在您可以看到整个红色矩形，包括窗口边界之外的部分，您在使用SVG时通常不会这样做，它只是帮助您理解正在发生的事情的一种方式。
设置一个新窗口

正如我之前所说，SVG是一个多坐标系统同时工作，在最简单的情况下，也有一个用于画布，一个Windows的坐标系统。我还提到，你可以创建一个新的画布并建立一个新窗口。

每次构建一个新的SVG元素，即使您嵌套在另一个SVG元素中，也会创建一个具有自己坐标系统的新画布和窗口，只有少数元素创建新的画布和窗口：

要素
实例化一个元素时被实例化的元素。
介绍SVG文件的元素。
要素

因为我们还没有开始讨论这些元素（除了SVG元素），我现在只列出它们。