将 SVG 与媒体查询结合使用

在 HTML 文档中，我们可以根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。将 SVG 与媒体查询一起使用时，我们可以做类似的事情。

本文摘自 Tiffany 的书 CSS Master，第 3 版 。如果您想掌握其他高级 CSS3 功能（例如 Flexbox 和 Grid），请查看它！

除了将 CSS 与 HTML 结合使用外，我们还可以将 CSS 与 SVG 或 Scalable Vector Graphics 结合使用 。 SVG 是一种用于描述平面二维图像的标记格式。因为它是一种标记语言，所以它有一个文档对象模型，并且可以与 CSS 一起使用。

通过将 CSS 与 SVG 结合使用，我们可以根据用户交互更改 SVG 的外观。或者我们可以在多个地方使用同一个 SVG 文档，并根据视口的宽度显示或隐藏它的一部分。

所有主要的浏览器引擎都支持 SVG 1.1 规范，而且他们已经这样做了多年。对特性的支持 SVG 2 另一方面，仍在进行中。在撰写本文时，我们将在此处讨论的某些内容的浏览器支持有限。当您阅读本文时，这种情况可能已经改变。密切关注 Chromium 元问题 — 实施 SVG2 功能 — 以跟踪基于 Chromium 的浏览器的开发进度。观看支持 SVG 2 功能元问题以跟进 Firefox 的实现工作，以及 WebKit 的实现 SVG 2 为 Safari 元问题。问题跟踪器导航可能令人不快，但就目前而言，它们是跟踪 SVG 2 支持的最佳方式。

然而，在我们进一步讨论之前，让我们先谈谈什么是 SVG 以及为什么要使用它。

矢量图像与光栅图像

目前在网络上使用的大多数图像都是光栅图像，也称为位图图像。 光栅图像 由固定网格上的像素组成，每英寸具有一定数量的像素。 JPEG、WebP、GIF 和 PNG 都是光栅图像格式的示例。

光栅图像与 分辨率有关 。 144 PPI（每英寸像素）PNG 图像在具有 144 PPI 显示分辨率的设备上看起来很棒。然而，在更高分辨率的 400 PPI 显示器上查看时，相同的图像可能看起来很模糊。光栅图像也有固定尺寸，在原始尺寸下看起来最好。将 150 x 150 像素的图像缩放到 300 x 300 像素会使其失真。

矢量图像格式不使用网格上的像素，而是描述构成图像的原始形状（圆形、矩形、线条或路径）以及它们在文档坐标系中的位置。因此，矢量图像与 分辨率无关 ，无论显示分辨率或显示尺寸如何，都可以保持其质量。

分辨率独立是SVG的最大优势。我们可以在不损失质量的情况下放大或缩小图像。相同的图像在高 PPI 和低 PPI 设备上看起来都很棒。也就是说，SVG 不太适合照片所需的颜色数据量。最适合绘图和形状。用它代替 PNG 和 GIF 图像，并作为图标字体更灵活的替代品。

SVG 的另一个优点是它旨在与其他 Web 语言一起使用。我们可以使用 JavaScript 创建、修改和操作 SVG 图像。或者，正如我们将在下面看到的，我们可以使用 CSS 为 SVG 设置样式和动画。

将 CSS 与 SVG 文档相关联

将 CSS 与 SVG 结合使用与将其与 HTML 结合使用非常相似。我们可以使用 CSS 来应用 styleSVG 元素的属性，使用 <style>元素，或链接到外部样式表。每种方法的优缺点与在 HTML 中使用 CSS 时相同。

使用 `style`属性

这是一个简单的 SVG 文档，其中的代码创建了一个黑色圆圈：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" 
➥enable-background="new 0 0 200 200"> 
<circle cx="101.3" cy="96.8" r="79.6" /> 
</svg>

下图显示了该代码在浏览器中的呈现方式。

让我们使用 CSS 和 style属性：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" 
➥enable-background="new 0 0 200 200"> 
<circle cx="101.3" cy="96.8" r="79.6" style="fill: #f9f" /> 
</svg>

其效果如下所示。

这是在 HTML 中使用 CSS 和在 SVG 中使用 CSS 的一个区别：属性名称。我们在 HTML 文档中使用的许多 CSS 属性与 SVG 不兼容，反之亦然。我们将在本章后面回到这一点。

使用 style属性当然不是使用 CSS 的最佳方式。这样做会限制在多个元素或文档中重用这些样式的能力。相反，我们应该使用内联或链接的 CSS。

在 SVG 文档中嵌入 CSS

而不是使用 style属性，我们可以使用 <style>元素：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
➥ 200 200" enable-background="new 0 0 200 200"> 
<style type="text/css"> 
圆圈 { 
填充：#0c0； 
        } 
</style> 
<circle cx="101.3" cy="96.8" r="79.6" /> 
</svg>

在 SVG 文档中嵌入 CSS 让我们可以为同一文档中的多个元素重用这些样式，但它会阻止 CSS 在多个文档之间共享。对于徽标和图标来说这很好。但是，如果您要创建图表样式库之类的内容，则最好使用外部 CSS 文件。

使用标准文本编辑器，您还可以向使用 Sketch、Inkscape 或 Illustrator 等软件创建的 SVG 图像添加 CSS。这样做不会影响您使用绘图应用程序编辑图像的能力，但如果您使用图像软件编辑文件，应用程序可能会重写或删除您的 CSS。

从 SVG 链接到外部 CSS 文件

与 HTML 一样，链接到外部 CSS 文件可以在多个 SVG 文档之间共享样式。要链接外部 CSS 文件，请添加 <? xml-stylesheet ?>到 SVG 文件的开头：

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet href="style.css" type="text/css"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 
➥ 200 200" enable-background="new 0 0 200 200"> 
<circle cx="101.3" cy="96.8" r="79.6" /> 
</svg>

使用 `<link>`元素

或者，使用 HTML <link>元素。如果您确实使用此方法，则需要包括 xmlns命名空间属性，如下图：

<link href="style.css" type="text/css" rel="stylesheet" 
➥ xmlns="http://www.w3.org/1999/xhtml" />

注意：一些较旧的浏览器需要 <link>被包围的元素 <defs>或者 <g>标签。

这 <link>element 不是 SVG 元素。它属于 HTML 和 XHTML。 XHTML 是根据 XML 标记规则解析的 HTML 变体。根据 XML 的规则，我们可以从其他 XML 方言（例如 XHTML）中借用元素及其行为。然而，为此，我们需要告诉浏览器该元素属于哪个命名空间，使用 xmlns属性。

使用 `@import`

我们还可以通过使用链接到外部样式表 @import里面 <style>和 </style>标签：

<style type="text/css"> 
@import('style.css'); 
</style>

此方法的功能类似于 <link>方法。

SVG 和 `<img>`元素：限制

从 SVG 文件链接到外部资源，包括 CSS 文件，不适用于 <img>元素。这是一个安全限制 <img>嵌入浏览器的元素。

如果您想对 SVG 图像使用链接 CSS，则需要执行以下两项操作之一：

使用 <style>SVG 文档中的元素来放置 CSS 内联
使用 <iframe>或者 <object>元素（见下面的注释）

注意：Craig Buckler 的教程“ 如何将可缩放矢量图形添加到您的网页 ”讨论了使用 <iframe>和 <object>详细。

一般来说，你应该使用 <iframe>超过 <object>. 然而 <object>元素可以是一个 <a>元素，而 <iframe>不能。使用 <iframe>或者 <object>还使 SVG 文档树可用于父文档的文档树。这意味着我们可以使用 JavaScript 与之交互（例如，使用 document.querySelector('iframe').contentDocument).

内联 SVG 和外部资源

将 SVG 添加到 HTML 时，浏览器不会加载 SVG 文档引用的外部资源。但是，我们可以从 SVG 文档链接到 CSS <head>我们的 HTML 文档：

<头> 
    ⋮ 
<link href="svg.css" type="text/css" rel="stylesheet" /> 
</头>

HTML 文档中的 SVG 元素也成为 HTML 文档树的一部分。如果您使用的是内联 SVG，那么将与 HTML 相关的 CSS 和与 SVG 相关的 CSS 组合在同一个样式表中是非常好的。

SVG 和 HTML 之间的差异

虽然 SVG 和 HTML 都是标记语言，但它们之间有两个显着差异会影响它们如何使用 CSS：

SVG 不遵循 CSS 盒模型
SVG 缺乏定位方案

SVG 不遵循 CSS 盒模型

当与 HTML 一起使用时，CSS 布局遵循 CSS 盒模型的规则。另一方面，SVG 使用坐标进行布局。它遵循最好理解为“形状模型”的内容。

SVG 形状不限于矩形框。因此，大多数与盒模型相关的属性不适用于 SVG 元素。例如，您不能更改 padding或者 marginSVG 元素。你也不能使用 box-sizing, box-shadow, outline，或者 border-*特性。网格布局、浮动和 Flexbox 也不起作用。

但是，您可以使用 CSS 来设置或更改一系列 SVG 属性和属性值。概述了完整列表 SVG 2 规范中，尽管大多数浏览器的支持尚不完整。一些 CSS 属性，例如 filter, 可以与 SVG 或 HTML 一起使用。在本章中，我们将在特定技术的背景下讨论其中的一些。

SVG 缺乏定位方案

当 CSS 与 HTML 一起使用时，元素框可以：

存在于正常流程中
从正常流量中删除 float财产
从正常流量中删除 position财产

CSS 规范将这些称为 定位方案 。 SVG 中不存在定位方案。这 position属性对 SVG 元素没有影响。也没有像这样的属性 top, left和 bottom，这取决于被定位的元素。您也不能在 SVG 文档中浮动元素。

相反，SVG 使用坐标系来放置元素。创建一个 <circle>，例如，您需要使用 cx和 cy属性，并使用 r属性。多边形由一系列点坐标和在它们之间绘制的线段组成。换句话说，您可以定义将元素绘制到 SVG 画布的位置，但您不能在 CSS 词的意义上“定位”它们。

与定位方案相关，SVG 也缺乏 z-index和堆叠上下文。

注意： SVG 2 规范确实为 z-index和堆叠 SVG 文档中的上下文，但大多数浏览器尚不支持它。

SVG 元素是根据它们的源顺序堆叠的。出现在文档后面的那些位于堆栈的顶部。如果要更改 SVG 元素的堆叠顺序，则需要在源中移动它们或使用 JavaScript 在 DOM 树中对它们重新排序。

事实上，大多数 CSS 2.1 属性不适用于 SVG 文档。例外包括动画和变换， display, overflow, visibility, filter，以及一些字体和文本相关的属性。相反，您必须对使用于 SVG 文档特定 SVG 的样式属性。大多数这些属性也可以表示为 SVG 元素属性。

样式化 SVG 元素

这是一个如何使用 CSS 设置 SVG 元素样式的简单示例。首先是我们的 SVG 文档，它是一个独立的文件：

<?xml version="1.0" encoding="utf-8"?> 
<?xml-stylesheet href="styles.css" type="text/css" ?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= 
➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497 
➥ 184" enable-background="new 0 0 497 184" xml:space="preserve"> 
<polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2, 
➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8, 
➥66.6"/> 
<circle id="circle" cx="245" cy="88.9" r="67.5"/> 
</svg>

此标记创建如下所示的图像。

尽管我们不能对 SVG 文档使用大多数 CSS 属性，但我们可以使用 CSS 来更改元素的颜色。让我们把星星变成黄色：

＃星星 { 
填充：hsl( 44, 100%, 50% ); 
}

你会经常看到 fill与 SVG 标签一起使用的属性——例如， <circle fill="rgb( 255, 185, 0 )" cx="3" cy="10" r="100">— 但它也是一个可以与 CSS 一起使用的属性。

我们还可以使用 CSS 来调整元素的 stroke，这是 SVG 形状的轮廓。形状的笔画存在，即使没有 stroke属性被设置。让我们给我们的圆一个十像素宽的深蓝色虚线边框。我们还将设置它的 fill财产到 cornflowerblue:

圆圈 { 
填充物：矢车菊蓝； 
笔画：深蓝色； 
笔画宽度：10； 
中风-dasharray: 10, 15; 
笔画线帽：圆形； 
}

这给了我们下面的结果。

使用 SVG 属性作为 CSS 属性

我们也可以使用 CSS 来设置一些形状元素的坐标值： <rect>, <circle>，和 <ellipse>. 通常，我们会为这些元素使用 SVG 属性：

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
<rect x="20" y="200" width="300" height="300" fill="#f60" /> 
</svg>

但是，SVG 2 将一些 SVG 属性重新定义为几何属性。这意味着我们可以使用 CSS 来设置它们的值：

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
<style type="text/css"> 
矩形{ 
x: 20px; 
y：50px； 
宽度：300px； 
高度：300px； 
填充：#f60； 
      } 
</style> 
<rect /> 
</svg>

坐标属性 ( x和 y), 中心坐标属性 ( cx和 cy) 和半径属性 ( rx, ry，和 r)，可以使用 CSS 进行设置。所以可以 width和 height. 单位对于 SVG 属性是可选的。另一方面，CSS 值需要单位。长度和百分比对于此处提到的属性都有效，但请注意，长度在 SVG 文档中的作用略有不同。请记住，SVG 中的 S 代表 可扩展 。 SVG 元素的计算大小还取决于：

计算的 width和 height根 SVG 元素
根元素的值 viewBox属性
应用于元素或其祖先的任何缩放变换

换句话说，我们的角落 <rect>元素是 (20, 50), (20, 320), (350, 320)，和 (20, 350)在 SVG 坐标系中。但是，实际尺寸可能更大或更小，具体取决于上述因素。

并非每个 SVG 属性都可以通过 CSS 获得——至少不是在每个浏览器中。例如，Chrome 和 Edge 支持使用 CSS path()函数来设置路径数据，或 d属性：

小路 { 
d: 路径("M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z"); 
}

在撰写本文时，它们是唯一可以执行此操作的浏览器。在添加支持的工作 Firefox 和 WebKit 中尚未开始。

对于其他形状元素，SVG 2 规范完全不一致。迄今为止，您必须使用元素属性来设置 <line>, <polyline>，和 <polygon>元素。

也就是说，我们不限于使用类型（或元素）选择器来设置属性。例如，我们可以使用类选择器定义小圆、中圆和大圆：

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> 
<style type="text/css"> 

。小的 { 
cx: 20px; 
cy：20px； 
r: 20px; 
填充：#0c0； 
      } 

。中等的 { 
cx: 80px; 
cy：80px； 
r: 60px; 
填充：#fc0; 
      } 

。大的 { 
cx: 220px; 
cy: 220px; 
r: 120px; 
填充：#00f； 
      } 

</style> 

<circle class="small" /> 
<circle class="medium" /> 
<circle class="大" /> 
</svg>

不管选择器是什么，使用 CSS 语法来指定属性也可以很容易地为它们设置动画。我们将在下一节中了解如何执行此操作。

动画和转换 SVG CSS 属性

当我们将过渡和动画添加到混合中时，将 CSS 与 SVG 结合使用会变得更加有趣。该过程就像使用 CSS 为 HTML 元素设置动画一样，但具有 SVG 特定的属性。让我们使用以下 SVG 文档创建一个闪烁的星星效果：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" 
➥ y="0px" viewBox="0 0 497 184" xml:space="preserve"> 
<定义> 
<link href="twinkle.css" type="text/css" rel="stylesheet" 
➥ xmlns="http://www.w3.org/1999/xhtml"/> 
</定义> 
<polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2 
➥,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 
➥ 55.8,66.6"/> 
<polygon class="star twinkle" points="77,23.7 98.2,66.6 145.5, 
➥66.5 111.2,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 
➥ 8.5,67.5 55.8,66.6"/> 
</svg>

我们的文档包含两个星形多边形元素，每个元素的类名是 star. 为了创建闪烁效果，我们将动画第一个。这是我们的 CSS：

@关键帧闪烁{ 
从 { 
填充不透明度：.4； 
    } 
到 { 
填充不透明度：0； 
变换：比例（2）； 
    } 
} 
。星星 { 
填充：RGB（255,195,0）； 
变换原点：50% 50%； 
} 
.闪烁{ 
动画：闪烁 1.5 秒无限向前缓入； 
}

这里我们使用了特定于 SVG 的属性 fill-opacity. 与 CSS 一样，如果我们可以插入 SVG 样式属性的值，我们就可以对其进行动画或过渡。您可以在下图中看到动画的两个不同点。

让我们再看一个例子。这次我们将通过过渡来创建绘图效果 stroke-dasharray财产。这是我们的 SVG 文档：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 200 200" enable-background="new 0 0 200 200"> 
    <circle fill="transparent" stroke-width="16" cx="101.3"
➥ cy="96.8" r="79.6"/>
</svg>

这 stroke-dasharray属性接受以逗号分隔的长度或百分比值列表，以创建虚线模式。奇数值确定划线长度。偶数值确定间隙长度。一种 stroke-dasharray的价值 5, 10意味着中风将是 5px长有间隙 10px在每个破折号之间。一个值 5, 5, 10替补 5px和 10px破折号长度与 5px之间的差距。

我们可以用 stroke-dasharray通过从零虚线长度和大间隙开始，以大虚线长度和零虚线间隙结束来创建绘图效果。然后我们将在两者之间过渡。这是我们的 CSS 的样子：

圆圈 { 
过渡：stroke-dasharray 1s 缓入； 
填充：透明； 
中风-dasharray: 0, 500; 
} 
.animate { 
中风-dasharray: 500, 0; 
}

在过渡开始时，我们的笔画是不可见的，因为虚线长度是 0我们的差距是 500. 但是当我们添加 animate类到我们的圈子，我们将破折号长度移动到 500并消除差距。效果有点像用圆规画一个圆。为什么是500？这是创造这种特殊效果的最小值。

动画路径未来

还记得上一节中通过 CSS 定义路径的示例吗？有一天，我们或许可以在每个浏览器中使用 CSS 为路径设置动画：

小路 { 
d：路径（“M357.5 451L506.889 192.25H208.111L357.5 451Z”）； 
过渡：d 1s 缓入缓出； 
} 
.拉直{ 
d：路径（“M357.5 8871L406 -10113.75H208.111L357.5 351Z”）； 
}

但是，迄今为止，只有基于 Chromium 的浏览器（例如 Google Chrome 和 Microsoft Edge）支持以这种方式动画化路径定义。要使其在其他浏览器中工作，请使用 JavaScript 库，例如 GreenSock 及其 MorphSVGPlugin。除了跨浏览器兼容性之外，GreenSock 和 MorphSVGPlugin 还可以更轻松地在两个形状之间进行变形，而不管每个形状中的点数如何。

对于 HTML 文档，我们可能会根据视口的条件显示、隐藏或重新排列页面的某些部分。例如，如果浏览器窗口的宽度为 480 像素，我们可能会将导航从水平导航移动到垂直可折叠列表。我们可以对媒体查询和 SVG 文档做类似的事情。考虑一个徽标，例如下图中虚构的 Hexagon Web Design & Development 的徽标。

如果没有媒体查询，这个 SVG 标志会简单地拉伸或收缩以适应视口或其容器。但是通过媒体查询，我们可以做更聪明的事情。

让我们区分 HTML 文档视口和 SVG 文档视口。当 SVG 内联时，HTML 视口和 SVG 视口是一回事。 SVG 文档的行为类似于任何其他 HTML 元素。另一方面，当一个 SVG 文档被链接时——就像 <iframe>, <object>或者 <img>元素——我们正在处理 SVG 文档视口。

媒体查询在这两种情况下都适用，但是当 SVG 文档被链接时，它的视口独立于它的 HTML 文档。在这种情况下，浏览器窗口的大小不会决定 SVG 视口的大小。相反，视口大小由 <object>, <iframe>，或者 <img>元素。以下面的（删节的）SVG文档为例：

<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/ 
➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
➥ viewBox="0 0 555 174" xml:space="preserve"> 
<定义> 
<style type="text/css"> 
/* CSS 在这里 */ 
</style> 
</定义> 
<g id="十六进制"> 
<polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11 
➥ 145.5,11 190.7,86.5 145.5,162"/> 
<path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18. 
➥4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87。 
➥3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/> 
</g> 

<g id="word-mark"> 
<g id="hexagon-word"> 
            ... 
</g> 
<g id="web-design-and-dev"> 
            ... 
</g> 
</g> 
</svg>

注意：提供了此技术的完整演示，包括此 SVG 文档的完整源代码存档中代码。

在较小的视口中，让我们仅在六边形符号中显示 H：

@media（最大宽度：320px）{ 
[id=word-mark] { 
显示：无； 
    } 
}

现在，每当我们的 SVG 容器小于或等于 20em，只有我们徽标的符号部分可见。

要从 HTML 文档触发此视图，请设置 SVG 容器的宽度：

<iframe src="hexlogo.svg" style="width: 320px; border:0"></iframe>

正如您在查看上图时可能已经注意到的那样，我们的 SVG 图像保留了它的内在尺寸，即使它的一部分被隐藏了。不幸的是，这是 SVG 的一个限制。要修复它，我们需要更改 viewBoxSVG 文档的属性，但仅当视口小于特定大小时。这是一个很好的用例 matchMedia（这将在第 10 章“ 有条件地应用 CSS ”中讨论）。

这 viewBox属性，顾名思义，决定了 SVG 元素的可视区域。通过调整它，我们可以确定 SVG 图像的哪一部分填充了视口。下面是一个使用示例 matchMedia和一个媒体查询来更新 viewBox属性：

<script type="text/javascript"> 
const svg = document.querySelector('svg'); 

/* 将原始值存储在变量中 */ 
const originalViewBox = svg.getAttribute('viewBox'); 

/* 定义我们的媒体查询和媒体查询对象 */ 
const mq = matchMedia('(最大宽度：320px)'); 

/* 定义处理程序 */ 
const updateViewBox = () => { 
如果（mq.matches）{ 
/* 更改 viewBox 尺寸以显示六边形 */ 
svg.setAttribute('viewBox', '0 0 200 174'); 
} 别的 { 
svg.setAttribute('viewBox', originalViewBox); 
    } 
} 

svg.addEventListener('SVGLoad', updateViewBox); 

/* 如果媒体条件改变则触发 */ 
mq.addEventListener('change', updateViewBox); 
</脚本>

现在，只要 SVG 容器小于等于 320 像素， viewBox将会 "0 0 200 174". 当超过 320 像素时， viewBox恢复到初始值。

由于该技术使用 onload事件属性或 SVGLoad事件，将我们的 CSS 和 JavaScript 嵌入到 SVG 文件中是个好主意。当 CSS 是外部的时， SVGLoad事件可能会在其关联的 CSS 完成加载之前触发。

使用媒体查询 `background-size`

SVG 文档和媒体查询不限于前景图像。我们还可以使用 CSS 调整 SVG 视口的大小 background-size财产。

我们将从这个 SVG 文档开始：

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
➥ viewBox="-20 -20 250 250" xml:space="preserve"> 
<style type="text/css"> 
圆圈 { 
中风：#000； 
笔画宽度：30； 
填充：#009688； 
        } 
@media（宽度：100px）{ 
圆圈 { 
填充：#673ab7； 
            } 
        } 
@media（宽度：300px）{ 
圆圈 { 
填充：#ffc107； 
            } 
        } 
</style> 
</定义> 
<circle cx="100" cy="100" r="100" /> 
<circle cx="100" cy="100" r="50" /> 
</svg>

这是一个简单的案例。我们的 <circle>元素获得新的 fill特定视口宽度的颜色。当视口为 20 像素宽时， fill价值是蓝绿色。当它是 300 像素宽时，它是黄色的。

为了完成这项工作，我们必须使用我们的 SVG 图像作为背景图像并设置选择器的 background-size财产。在这种情况下，我们将使用我们的图像作为背景 <body>元素和为 <li>元素：

body, li  { 
背景：网址（circles.svg）； 
} 
身体 { 
背景色：#9c27b0； 
背景尺寸：300px 自动； 
} 
li { 
背景位置：左居中； 
背景重复：不重复； 
背景尺寸：1em 自动； 
padding-left: 40px; 
字体大小：24px； 
保证金：1rem 0； 
}

结果如下图。

结论

将 SVG 与 CSS 结合使用为我们提供了更多灵活和自适应文档的可能性。您现在应该知道如何：

使用 CSS 设置 SVG 元素的样式
动画 SVG 属性
使用 CSS 媒体查询和 matchMedia用于显示和隐藏 SVG 文档部分的 API

将 SVG 与媒体查询结合使用

将 SVG 与媒体查询结合使用

矢量图像与光栅图像

将 CSS 与 SVG 文档相关联

使用 style属性

在 SVG 文档中嵌入 CSS

从 SVG 链接到外部 CSS 文件

使用 <link>元素

使用 @import

SVG 和 <img>元素：限制

内联 SVG 和外部资源

SVG 和 HTML 之间的差异

SVG 不遵循 CSS 盒模型

SVG 缺乏定位方案

样式化 SVG 元素

使用 SVG 属性作为 CSS 属性

动画和转换 SVG CSS 属性

动画路径未来

使用媒体查询 background-size

结论

使用 `style`属性

使用 `<link>`元素

使用 `@import`

SVG 和 `<img>`元素：限制

使用媒体查询 `background-size`