反应原生 SVG 大小 - Javascript

如果你是一个前端开发者，你很可能已经使用过 SVG（可缩放矢量图形）来创建图标，图表和其他矢量图像。但是，有时候你可能需要在 JavaScript 代码中动态计算和调整 SVG 元素的大小。

在本文中，我们将探讨如何使用 JavaScript 来获取和更改 SVG 元素的大小。

获取 SVG 元素大小

要获取 SVG 元素的大小，可以使用 getBoundingClientRect() 方法。该方法返回一个 DOMRect 对象，该对象包含元素的左、上、右和下边距纸的坐标以及元素的宽度和高度。

// 获取 SVG 元素
const svg = document.querySelector("svg");

// 获取 SVG 元素的大小
const svgRect = svg.getBoundingClientRect();

// 输出 SVG 元素的宽度和高度
console.log(`SVG Width: ${svgRect.width}px`);
console.log(`SVG Height: ${svgRect.height}px`);

该代码将输出 SVG 元素的宽度和高度。

更改 SVG 元素大小

要更改 SVG 元素的大小，可以使用 setAttribute() 方法来设置 width 和 height 属性。

// 获取 SVG 元素
const svg = document.querySelector("svg");

// 设置 SVG 元素的宽度和高度
svg.setAttribute("width", "500");
svg.setAttribute("height", "500");

以上代码将将 SVG 元素的宽度和高度设置为 500。

如果你想保持 SVG 元素的宽高比例，则可以只设置其中一个属性值（width 或 height），并使用其他属性的值来计算第二个属性的值。

// 获取 SVG 元素
const svg = document.querySelector("svg");

// 设置 SVG 元素的宽度
svg.setAttribute("width", "500");

// 计算 SVG 元素的高度，保持宽高比例
const svgRect = svg.getBoundingClientRect();
const aspectRatio = svgRect.height / svgRect.width;
const calculatedHeight = aspectRatio * 500;
svg.setAttribute("height", calculatedHeight);

以上代码将 SVG 元素的宽度设置为 500，并根据宽高比例计算元素的高度。

结论

在这篇文章中，我们讨论了如何使用 JavaScript 来获取和更改 SVG 元素的大小。通过使用 getBoundingClientRect() 方法获取元素的宽度和高度，以及使用 setAttribute() 方法设置元素的宽度和高度，我们可以通过 JavaScript 动态地调整 SVG 元素的大小以满足我们的需求。