CSS 使用`<use>`引用的内联SVG符号进行缩放

在本文中，我们将介绍如何使用CSS对使用<use>引用的内联SVG符号进行缩放的技巧。

阅读更多：CSS 教程

什么是内联SVG符号？

内联SVG符号是指通过<symbol>元素定义的可重用图形片段。通过使用<use>元素并引用这些符号，我们可以将其插入到HTML文档中的多个地方。内联SVG符号具有许多优点，例如可维护性和组件化，使得我们能够在设计和开发中简化操作。

使用`<use>`引用内联SVG符号

使用<use>元素来引用内联SVG符号很简单。我们只需要指定要引用的符号的ID，然后将<use>元素插入到HTML文档中即可。

<svg>
    <symbol id="my-icon" viewBox="0 0 24 24">
        <path d="M12 2C18.63 2 24 7.37 24 14C24 20.63 18.63 26 12 26C5.37 26 0 20.63 0 14C0 7.37 5.37 2 12 2Z"/>
    </symbol>
    <use href="#my-icon"></use>
</svg>

上面的代码片段展示了一个简单的内联SVG符号和如何使用<use>元素引用该符号。首先，在<svg>标签中定义了一个具有ID为”my-icon”的<symbol>元素。然后，我们通过<use>元素引用了这个符号，使用了href属性并指定了ID为”my-icon”。这样，我们就可以在需要的地方多次引用这个符号。

使用CSS缩放内联SVG符号

现在，让我们了解如何使用CSS对这些使用<use>引用的内联SVG符号进行缩放。

CSS提供了多种方式来缩放SVG图形。其中一种方式就是使用transform属性和scale()函数。我们可以通过给<use>元素添加一个具有transform属性的CSS样式规则来实现缩放。例如，下面的CSS样式将会将内联SVG符号缩放为原来的2倍：

use {
    transform: scale(2);
}

在上面的例子中，我们给<use>元素添加了一个transform属性，并使用scale(2)函数将其缩放为原来的2倍。这样，内联SVG符号将会在网页上显示为原来的两倍大小。

除了使用scale()函数，CSS还提供了其他的变换函数和选项，例如translate()、rotate()和skew()等。通过组合使用这些函数，我们可以实现更加复杂和多样化的缩放效果。

示例：缩放内联SVG图标

下面的示例演示了如何使用CSS缩放内联SVG图标。首先，我们将定义两个具有不同大小的内联SVG符号。然后，通过给不同的<use>元素添加不同的CSS样式规则，我们可以实现对内联SVG图标的缩放。

<!-- 内联SVG符号 -->
<svg>
    <symbol id="small-icon" viewBox="0 0 24 24">
        <path d="M12 2C18.63 2 24 7.37 24 14C24 20.63 18.63 26 12 26C5.37 26 0 20.63 0 14C0 7.37 5.37 2 12 2Z"/>
    </symbol>
    <symbol id="large-icon" viewBox="0 0 48 48">
        <path d="M24 4C12.96 4 4 12.96 4 24C4 35.04 12.96 44 24 44C35.04 44 44 35.04 44 24C44 12.96 35.04 4 24 4ZM24 40C14.06 40 6 31.94 6 22C6 12.06 14.06 4 24 4C33.94 4 42 12.06 42 22C42 31.94 33.94 40 24 40Z"/>
    </symbol>
</svg>

<!-- 使用内联SVG符号 -->
<svg>
    <use href="#small-icon"></use>
    <use href="#large-icon"></use>
</svg>

<!-- CSS样式 -->
<style>
    use:nth-child(1) {
        transform: scale(1.5);
    }

    use:nth-child(2) {
        transform: scale(2);
    }
</style>

在上面的代码中，我们定义了一个具有ID为”small-icon”的小图标和一个具有ID为”large-icon”的大图标。然后，我们通过给不同的<use>元素添加不同的CSS样式，使用transform: scale()来实现对图标的缩放。在这个例子中，第一个使用了scale(1.5)，缩放为原来的1.5倍大小；第二个使用了scale(2)，缩放为原来的2倍大小。