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 o