如何重新缩放 SVG 图像的大小

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形格式，因为它可以无限缩放而不会失去清晰度而得名。但是，有时候我们需要重新缩放 SVG 图像的大小以适应当前的要求。本文将介绍一些方法来帮助您实现它。

方法一：使用 CSS

SVG 图像可以像其他 HTML 元素一样使用 CSS 来设置样式。如果您想要缩放 SVG，可以使用 transform: scale() 属性来实现。

svg {
  transform: scale(0.5);
}

该示例将缩小 SVG 图像的大小为原来的一半。您可以调整括号内的数字来更改缩放比例。

方法二：使用 viewBox 属性

SVG 的 viewBox 属性定义了在给定的宽度和高度下如何尺寸和定位 SVG，可以使用它来重新缩放 SVG。例如，要将 SVG 缩小为一半，您可以编辑 SVG 标记以更改 viewBox 属性。

<svg viewBox="0 0 50 50">
  <!-- SVG elements -->
</svg>

在这个示例中，viewBox 的值为 0 0 50 50，其中前两个数字是 SVG 的左上角的 x 和 y 坐标，在这个例子中坐标都为 0，后两个数字是 SVG 的宽度和高度，均为 50。要将 SVG 缩小为一半，您可以将后两个数字都除以 2。

<svg viewBox="0 0 25 25">
  <!-- SVG elements -->
</svg>

方法三：使用 JavaScript

如果您需要动态更改 SVG 大小，可以使用 JavaScript。下面是一些实现方法。

通过改变 viewBox

const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox').split(' ');
viewBox[2] = Number(viewBox[2]) * 0.5;
viewBox[3] = Number(viewBox[3]) * 0.5;
svg.setAttribute('viewBox', viewBox.join(' '));

此示例获取现有的 viewBox 值，将宽度和高度除以 2，并将新值设置回 viewBox 属性中。请注意，此代码假定原始的 viewBox 值是以空格分隔的字符串。

通过 CSS transform

const svg = document.querySelector('svg');
svg.style.transform = 'scale(0.5)';

此示例使用 transform: scale() 属性来缩小 SVG，与使用 CSS 来缩放 SVG 类似。

结论

以上是三种方法来重新缩放 SVG 图像的大小，您可以根据您的需求选择最适合您的方法。无论您选择哪种方法，都需要测试缩放后的 SVG 是否有所改进，并确保它在不同设备和屏幕尺寸下都能正确显示。