svg viewbox_了解SVG viewBox

svg viewbox

The viewBox attribute is one of the first encountered by those new to SVG, and potentially one of the most confusing. While it has been covered by others in the past - Sara Soueidan’s long-form series might be considered one of the canonical resources - designers and developers have been missing a “quick start” guide that provides just the details necessary to get up and running in the most common vector drawing applications. That’s the goal of this article.

viewBox属性是SVG新手首先遇到的属性之一，并且可能是最令人困惑的属性之一。 虽然过去曾被其他人讨论过-Sara Soueidan的长篇系列可能被视为规范资源之一-设计师和开发人员却缺少“快速入门”指南，该指南仅提供了入门和运行所需的详细信息最常见的矢量绘图应用程序。 这就是本文的目标。

无限的画布 (An Infinite Canvas)

The SVG drawing space is effectively infinite: you can draw at any coordinate point anywhere in an SVG document. However, for display purposes the document usually has to have some sort of dimensioning, like a frame around a canvas painting. That’s where viewBox comes in.

SVG绘图空间实际上是无限的：您可以在SVG文档中任何位置的任何坐标点处进行绘图。 但是，出于显示目的，文档通常必须具有某种尺寸，例如围绕画布绘画的框架。 这就是viewBox 。

The most common way you’ll see viewBox applied is something like the following:

您将看到应用viewBox的最常见方式如下所示：

<svg viewBox="0 0 200 100">

I’ve left off SVG namespacing from the examples for simplicity and clarity. In addition, the background of the SVG examples have been changed to a light blue, to better show their actual areas.

为了简单和清楚起见，我从示例中省略了SVG 命名空间 。 此外，SVG示例的背景已更改为浅蓝色，以更好地显示其实际区域。

The viewBox uses four values, locating two coordinates in space: the top left of the SVG document, and the bottom right. In the example above, the top left corner is defined as 0 0 (x value, followed by y value), and the bottom right as 200 units across and 100 units down.

viewBox使用四个值，在空间中定位两个坐标：SVG文档的左上方和右下方。 在上面的示例中，左上角定义为0 0 ( x值，后跟y值)，右下角定义为200个单位向下和100个单位向下。

Two notes at this point:

此时有两个注意事项：

1. The values used don’t have units of measurement. It’s best not to think of them as pixels, inches, or anything else, just as generic units.

   使用的值没有度量单位 。 最好不要将它们视为像素，英寸或其他任何东西，就像通用单位一样。

2. While it’s very common for the top left corner of an SVG document to start at 0 0, it doesn’t have to.

   SVG文档的左上角通常从0 0开始，但这不是必须的。

In most vector drawing applications, the viewBox corresponds to the “canvas” or “artboard” area set up before you start drawing. However, many apps, including Adobe Illustrator and Sketch, will “clip” the viewBox to the visible area around the elements you have drawn when exporting as SVG, leaving little white space available inside the document. This is another reason why understanding the viewBox is important: you can adjust the visible “canvas” of the SVG directly in the code, rather than fighting the behaviour of your drawing application.

在大多数矢量绘图应用程序中， viewBox对应于开始绘图之前设置的“画布”或“画板”区域。 但是 ，许多应用程序(包括Adobe Illustrator和Sketch)将在导出为SVG时将viewBox剪切到您所绘制元素周围的可见区域 ，从而在文档内部几乎没有空白。 这也是理解viewBox如此重要的另一个原因：您可以直接在代码中调整SVG的可见“画布”，而不用担心绘图应用程序的行为。

An SVG <circle> element drawn without cx or cy attributes will assume that it’s center is at 0 0 in the coordinate space. Let’s see what one looks like drawn inside an SVG with the viewBox values we’ve used:

没有cx或cy属性绘制的SVG <circle>元素将假定其中心在坐标空间中为0 0 。 让我们看看使用我们已使用的viewBox值在SVG内部绘制的样子：

<svg viewBox="0 0 200 100">
    <circle r="50">
</svg>

Which produces:

产生：

You can see that the viewBox does not determine the size of the SVG element rendered on the page; that’s the purpose of the width and height attributes and/or any CSS applied to the SVG. Instead, the viewBox determines the aspect ratio of the space, and the relative size of elements within it.

您会看到viewBox不能确定页面上呈现的SVG元素的大小 ； 这是width和height属性和/或应用于SVG的任何CSS的目的。 取而代之的是，视框确定的空间的纵横比 ，以及在其内元件的相对大小。

Also note the capitalization of viewBox: SVG, being an XML language, is case-sensitive, so the attribute must be written that way if it is to be recognized.

另请注意， viewBox的大小写是一种XML语言，它是区分大小写的，因此，要识别该属性， 必须以这种方式编写。

If the viewBox gets smaller the apparent size of the circle becomes larger, relative to the SVG document, even though the circle’s radius remains unchanged:

如果viewBox变小 ，则相对于SVG文档，圆的视在尺寸也会变大 ，即使圆的半径保持不变：

<svg viewBox="0 0 100 50">
    <circle r="50">
</svg>

You might think of this change as “zooming into” the document; thus, the viewBox also provides an overall “scale” to the elements inside an SVG.

您可能会认为此更改是“放大”文档。 因此， viewBox还为SVG中的元素提供了整体“缩放”。

Elements drawn outside the viewBox space will get cut off. Let’s add a different <circle> element, this time with cx and cy values together with a fill:

在viewBox空间外部绘制的元素将被切除。 让我们添加一个不同的<circle>元素，这次添加cx和cy值以及fill ：

<svg viewBox="0 0 100 50">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Because this falls outside the dimensions of the viewBox, it can’t be seen: the SVG document clips it off automatically. We can change this by altering the viewBox values:

因为这超出了viewBox的尺寸，所以无法看到它：SVG文档自动将其剪切掉。 我们可以通过更改viewBox值来更改此设置：

<svg viewBox="0 0 200 120">
    <circle cx="150" cy="120" r="20" fill="red" />
</svg>

Which produces:

产生：

It’s important to note that SVG elements clipped outside the viewBox are still “present”: they can be animated and brought “into” the viewable area. They just can’t be seen by default.

重要的是要注意，裁剪在viewBox外部的SVG元素仍然是“存在的”：可以对其进行动画处理并“带入”可见区域。 默认情况下看不到它们。

It’s also possible to show elements hidden by restrictive viewBox dimensions by applying overflow: visible to the SVG document via CSS. However, this will not extend the SVG background to cover the newly-exposed area, assuming one is applied:

也可以通过应用CSS来显示SVG文档中overflow: visible元素，以显示受限的viewBox尺寸所隐藏的元素。 但是，如果应用了SVG， 则不会将SVG背景扩展到新曝光的区域：

An SVG with elements hidden by viewBox dimensions and overflow: visible applied

SVG的元素被 viewBox尺寸隐藏并 overflow: visible应用 overflow: visible

救援时间 (Rescue Time)

It’s also possible for viewBox coordinates for the top left corner to be negative. This may be required in the scenario provided earlier, when SVG elements are exported a little too close to the edge of the document.

左上角的viewBox坐标也可以为负 。 在较早提供的场景中，当SVG元素被导出到文档边缘时，这可能是必需的。

Let’s say that you have the following:

假设您具有以下条件：

<svg viewBox="0 0 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

Which creates:

哪个创建：

Currently only the bottom half of the circle can be seen; if we decrease the y component at the top left of the viewBox, we can fix that:

目前只能看到圆圈的下半部分； 如果减少viewBox左上方的y分量，则可以解决以下问题：

<svg viewBox="0 -40 500 100">
    <circle cx="50" cy="0" r="50" fill="red" />
</svg>

The result:

结果：

Adding padding to an SVG element will have a similar effect, but will not expose more of an element previously hidden by a viewbox limit.

向SVG元素添加padding将具有相似的效果，但不会显示更多以前由viewbox限制隐藏的元素。

It’s important to note that changing the viewBox values does not change the origin point of the SVG as a whole. That is, a circle drawn with its center at 0 0 will be seen completely if the top left corner of the viewBox is moved outwards enough: the origin point is not dragged with this change.

重要的是要注意，更改viewBox值并不会整体更改SVG的原点 。 也就是说，如果viewBox左上角足够向外移动，则将完全看到以0 0为中心的圆：此变化不会拖动原点。

结论 (Conclusion)

There are many more aspects to the viewBox, but this article, combined with the material in the SVG reading lists, should be enough for you to start with your own SVG work with confidence… which I very much look forward to seeing shared in the comments below.

viewBox还有很多其他方面，但是本文结合SVG阅读列表中的材料，应该足以让您自信地开始自己的SVG工作……我非常期待看到评论中的内容共享下面。

翻译自: https://thenewcode.com/1151/Understanding-the-SVG-viewBox

svg viewbox