svg嵌套svg_将SVG与媒体查询一起使用

svg嵌套svg

The following is a short extract from Tiffany’s new book, CSS Master, 2nd Edition.

以下是Tiffany的新书CSS Master第二版的摘录。

With HTML documents, we might show, hide, or rearrange parts of the page based on the conditions of the viewport. If the browser window is 480 pixels wide, for example, we might shift our navigation from a horizontal one to a vertical, collapsible list. We can do something similar with media queries and SVG documents. Consider a logo, such as that of the fictitious Hexagon Web Design & Development below.

对于HTML文档，我们可能会根据视口的条件显示，隐藏或重新排列页面的各个部分。 例如，如果浏览器窗口的宽度为480像素，我们可能会将导航从水平列表更改为可折叠的垂直列表。 我们可以对媒体查询和SVG文档执行类似的操作。 考虑徽标，例如下面虚构的Hexagon Web设计与开发徽标。

Without media queries, this SVG logo would simply stretch or shrink to fit the viewport or its container. But with media queries, we can do more clever things.

如果没有媒体查询，此SVG徽标将仅会拉伸或收缩以适合视口或其容器。 但是借助媒体查询，我们可以做更多聪明的事情。

Let’s distinguish between the HTML document viewport and the SVG document viewport. When SVG is inline, the HTML viewport and the SVG viewport are one and the same. The SVG document behaves like any other HTML element. On the other hand, when an SVG document is linked—as with the object or img elements—we’re dealing with the SVG document viewport.

让我们区分HTML文档视口和SVG文档视口。 当SVG内联时，HTML视口和SVG视口是相同的。 SVG文档的行为类似于任何其他HTML元素。 另一方面，当链接SVG文档时(与object或img元素一样)，我们将处理SVG文档视口。

Media queries work in both cases, but when the SVG document is linked, its viewport is independent of its HTML document. In that case, the size of the browser window doesn’t determine the size of the SVG viewport. Instead, the viewport size is determined by the dimensions of the object, iframe, or img element. Take the (abridged) SVG document that follows as an example:[^4]

两种情况下都可以使用媒体查询，但是在链接SVG文档时，其视口独立于HTML文档。 在这种情况下，浏览器窗口的大小不会决定SVG视口的大小。 取而代之的是，视口大小由object ，