svg 标签框_了解SVG视图框

亦凉 2022-11-27 04:27 152阅读 0赞

svg 标签框

The SVG `viewBox` can be a source of frustration when starting on your journey of learning SVG, I know it was for me!

当您开始学习SVG时，SVG `viewBox`可能会让人沮丧，我知道这是对我来说！

With alien-like syntax such as `viewBox="0 0 50 50"`, it’s no surprise that many of us face problems understanding the `viewBox`!

使用诸如`viewBox="0 0 50 50"`之类的外来语法，我们中的许多人在理解`viewBox`遇到问题就不足为奇了！

I hope this article will clear up any confusion you have, and put you in a position to use the power of the `viewBox`.

我希望本文能消除您的困惑，并让您可以使用`viewBox`的强大功能。

## 为什么要使用viewBox？ **(**Why viewBox?**)** ##

Why even bother to use a `viewBox`? You can create perfectly valid SVGs without specifying a `viewBox`, but you’d be depriving yourself of the many possibilities that the `viewBox` offers you.

为什么还要费心使用`viewBox` ？ 您可以创建完全有效的SVG，而无需指定`viewBox` ，但是您将使自己`viewBox`为您提供的许多可能性。

The `viewBox` gives us the power to make our SVGs fill whatever container they are in, let’s say we have a little bird image like so:

`viewBox`使我们能够将SVG填充到它们所在的任何容器中，也就是说，我们有一个小鸟像，如下所示：

With a `viewBox` correctly set on this image, it will scale to the dimensions of it’s container and since it’s an SVG it will look just as crisp!

在此图像上正确设置`viewBox` ，它将缩放到其容器的尺寸，并且由于它是SVG，因此看起来也一样清晰 ！

As you can see from the above, our bird scales to whatever size the container is!

从上面可以看到，我们的鸟可以缩放到任何大小的容器！

The `viewBox` also helps us hide part of an image which can be very useful for animations.

`viewBox`还可以帮助我们隐藏图像的一部分，这对于动画非常有用。

You can see from the above how powerful the `viewBox` can be, now it’s time to define it!

从上面可以看到`viewBox`功能强大，现在该定义它了！

## 定义viewBox **(**Defining the viewBox**)** ##

The `viewBox` has four values, separated by either whitespace or commas.

`viewBox`具有四个值，以空格或逗号分隔。

**Let’s give the above values more detail:**

**让我们更详细地说明上述值：**

*  **x** \- specify the minimum x coordinate
    
    **x-**指定最小x坐标
 *  **y** \- specify the minimum y coordinate
    
    **y-**指定最小y坐标
 *  **width** \- width in user coordinates/px units
    
    **width-**以用户坐标/ px为单位的宽度
 *  **height** \- height in user coordinates/px units
    
    **height-**以用户坐标/ px为单位的高度

Ok that’s enough theory and gives us a foundation to work off, now let’s start writing some code!

好的，这已经足够了理论，并为我们奠定了基础，现在让我们开始编写一些代码！

## 谈话很便宜，请告诉我代码！ **(**Talk is cheap, show me the code!**)** ##

First let’s examine the code for our bird SVG:

首先，让我们检查一下我们的鸟SVG的代码：

<div class="bird-cage">
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g fill="none" fill-rule="evenodd">
          <path d="M45.212 65.097c2.41 3.751 3.846 4.016 7.306 1.375.383-.292 1.081-.226 1.567-.057 2.749.96 5.162.316 7.197-2.074 1.455-1.708 2.312-3.865 2.89-6.17 1.6-6.38 1.514-12.826.44-19.291-.113-.68-.476-1.3-.724-1.947-.369.57-.854 1.081-1.087 1.722-1.89 5.203-4.344 9.953-7.764 13.925-3.968 4.609-8.464 8.02-14.152 8.627-.75.08-.872.698-.709 1.4.305 1.308 1.03 2.244 2.15 2.456.91.171 1.86.034 2.886.034zm-4.008 34.687c-.461-.231-.91-.617-1.386-.67-4.197-.47-8.272-1.623-12.243-3.25C17.177 91.605 8.305 84.597 1.123 74.61c-.257-.358-.476-.753-.871-1.382.734.092 1.25.138 1.76.224 5.184.871 10.368 1.269 15.55.02 9.27-2.236 15.192-9.022 18.351-19.452 2.07-6.833 2.736-13.943 2.911-21.181.09-3.692.343-7.482 1.144-11.026 2.043-9.041 6.818-15.51 14.098-19.092 9.68-4.765 18.53-2.839 26.457 5.219a22.692 22.692 0 0 1 5.23 8.401c.834 2.36 2.216 3.795 4.153 4.788 3.041 1.56 6.01 3.323 9.008 5.004.208.117.404.265.763.503-.363.375-.624.71-.935.955-2.908 2.292-5.81 4.6-8.75 6.833-.98.745-1.397 1.654-1.458 3.056a118.393 118.393 0 0 1-2.229 18.437c-1.86 9.185-4.85 17.806-9.587 25.446-2.843 4.586-6.386 8.298-10.244 11.675-2.095 1.832-4.366 1.836-6.68 2.117-6.172.75-12.23 2.151-18.139 4.427-.091.035-.165.133-.247.202h-.204z" fill="#231F20"/>
          <path d="M45.211 65.098c-1.026 0-1.976.136-2.885-.035-1.12-.212-1.845-1.148-2.15-2.456-.163-.702-.042-1.32.709-1.4 5.689-.607 10.185-4.018 14.152-8.627 3.42-3.972 5.874-8.722 7.763-13.925.233-.641.72-1.151 1.088-1.722.247.647.612 1.267.724 1.947 1.074 6.465 1.16 12.911-.44 19.29-.578 2.306-1.435 4.463-2.89 6.171-2.035 2.39-4.448 3.034-7.197 2.074-.486-.169-1.184-.235-1.567.057-3.46 2.64-4.895 2.376-7.307-1.374M76.666 16c1.792-.025 3.213 1.83 3.255 4.246.04 2.42-1.43 4.442-3.224 4.432-1.725-.01-3.156-1.903-3.189-4.218-.035-2.497 1.337-4.435 3.158-4.46" fill="#FEFEFE"/>
        </g>
      </svg>
    </div>
    
    .bird-cage {
      height 100px;
      width: 100px;
      border: 1px solid green;
    }

So in our code above, we have the SVG wrapped in a `div` with the class name `bird-cage`, the SVG will scale to dimensions of this `div`.

因此，在上面的代码中，我们将SVG封装在一个类名为`bird-cage`的`div` ，该SVG会缩放到该`div`尺寸。

Our `viewBox` has the values `0 0 100 100`, `100 100` shows our entire image and scales to our container (`bird-cage`).

我们的`viewBox`的值为`0 0 100 100` `100 100`显示了我们的整个图像并缩放到我们的容器( `bird-cage` )。

The `bird-cage` dimensions is what we call our `viewport`, essentially what we see - in the above example our `viewBox` fits perfectly.

`bird-cage`尺寸就是我们所说的`viewport` ，本质上就是我们看到的`viewport` \-在上面的示例中，我们的`viewBox`非常适合。

If we wanted to zoom in on our bird, how exactly would we do this? We would need to make our `viewBox` bigger in the `viewport`, so let’s update our `viewBox` to `0 0 75 75`

如果我们想放大我们的鸟，我们将如何做到这一点？ 我们需要在`viewport`将`viewBox`增大，所以让我们将`viewBox`更新为`0 0 75 75`

Now we have this:

现在我们有了这个：

Above is how it looks in the browser, really what is happening is this:

上面是浏览器中的外观，实际上是这样的：

You can think of the `viewport` as the window to our image and the `viewBox` as the tool we use to scale and position the image.

您可以将`viewport`视为图像的窗口，将`viewBox`视为用于缩放和定位图像的工具。

The `viewBox` is a very useful tool to crop our images. The easiest way to crop the image is by using the min `x` and `y` coordinates. If we wanted to only show the right half of the bird we can change the `viewBox` to be: `viewBox="50 0 100 100"` .

`viewBox`是裁剪图像的非常有用的工具。 裁剪图像的最简单方法是使用最小`x`和`y`坐标。 如果我们只想显示鸟的右半部分，则可以将`viewBox`更改为： `viewBox="50 0 100 100"` 。

This will give us the following:

这将为我们提供以下内容：

To give a clearer visual representation:

为了提供更清晰的视觉表示：

You can check out the code for the above [here][].

您可以在[此处][here]查看以上代码。

## 制作动画 **(**Creating an Animation**)** ##

To get an even better understanding of the `viewBox`, we’ll use it to help us make an animation of a cloud moving across the sky.

为了更好地理解`viewBox` ，我们将使用它来帮助我们制作在天空中移动的云的动画。

The first thing we need to do is create our `cloud` SVG, here’s the code:

我们需要做的第一件事是创建我们的`cloud` SVG，下面是代码：

Visually:

视觉上：

Don’t worry about it looking very white, it will look much clearer with a sky behind it.

不用担心它看起来很白，后面看起来很清晰。

Now to animate this is quite easy, all we need to do is change the `min-x` value of the `viewBox`.

现在制作动画非常容易，我们需要做的就是更改`viewBox`的`min-x`值。

To achieve this I will use [`Greensock`][Greensock] which is a great animation library, it’s beyond the scope of this article to get into how it works but if you want an article on it then [let us know on Twitter][].

为此，我将使用[`Greensock`][Greensock] ，它是一个出色的动画库，它的工作原理不在本文的讨论范围之内，但是如果您想在上面发表文章，请[在Twitter上告诉我们][let us know on Twitter] 。

Our JavaScript looks like this:

我们JavaScript如下所示：

// get a reference to our entire SVG
    const cloudSVG = document.querySelector('#cloudSVG');
    
    // animate using a time of 30 seconds our SVG and move the x value to 700
    TweenMax.to(cloudSVG, 30, { attr: { viewBox: "700 0 275 325" }});

As you can see we are instructing our `viewBox` to change it’s `x` value to `700` and we have set a time for this of `30` seconds. This gives us the following:

如您所见，我们正在指示`viewBox`将其`x`值更改为`700`并且为此设置了`30`秒的时间。 这给我们以下内容：

You can [check this out here][].

您可以[在此处查看][check this out here] 。

## 结论 **(**Conclusion**)** ##

I have left `preserveAspectRatio` out of this article as it can be overwhelming while also getting to grips with the `viewBox`. When you feel comfortable with the basics of the `viewBox` then you should go on to advance your knowledge by learning about `preserveAspectRatio`, if you would like me to write about it then again let us know via Twitter.

我已经离开`preserveAspectRatio`这篇文章的，因为它可以是压倒性的，同时也越来越与交手`viewBox` 。 当你感到舒适的基础知识`viewBox` ，那么你应该去通过学习来推进自己的知识`preserveAspectRatio` ，如果你要我写下来，然后让我们再通过Twitter了解。

I hope I have helped you understand the `viewBox`, now go ahead and make some cool stuff!

希望我能帮助您了解`viewBox` ，现在继续做一些很酷的事情！

Thanks for taking the time to read this article.

感谢您抽出宝贵的时间阅读本文。

> 翻译自: [https://www.digitalocean.com/community/tutorials/svg-svg-viewbox][https_www.digitalocean.com_community_tutorials_svg-svg-viewbox]

svg 标签框

[here]: https://codepen.io/alligatorio/pen/GbyXZz
[Greensock]: https://greensock.com/
[let us know on Twitter]: https://twitter.com/alligatorio
[check this out here]: https://codepen.io/alligatorio/pen/dBJqMK?editors=1010
[https_www.digitalocean.com_community_tutorials_svg-svg-viewbox]: https://www.digitalocean.com/community/tutorials/svg-svg-viewbox