js 获取 svg中的高度

在JavaScript中获取SVG元素的高度，可以通过以下几种方式：

基础概念

SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于描述二维矢量图形。SVG元素的高度可以通过其属性直接获取或通过DOM接口进行查询。

获取SVG高度的方法

方法一：使用元素的`getAttribute`方法

你可以直接使用SVG元素的getAttribute方法来获取其高度属性值。

// 假设有一个SVG元素
let svgElement = document.getElementById('mySvg');

// 获取SVG的高度属性
let height = svgElement.getAttribute('height');
console.log(height); // 输出可能是 "100px" 或者 "50%"

方法二：使用DOM接口获取计算后的样式

如果你想要获取SVG元素的实际渲染高度，可以使用getComputedStyle方法。

// 获取SVG元素的实际渲染高度
let computedHeight = window.getComputedStyle(svgElement).height;
console.log(computedHeight); // 输出可能是 "100px"

方法三：对于SVG内部的特定元素（如rect, circle等）

如果你想要获取SVG内部某个具体图形元素的高度，同样可以使用上述方法。

// 假设有一个SVG内部的rect元素
let rectElement = document.getElementById('myRect');

// 获取rect的高度属性
let rectHeight = rectElement.getAttribute('height');
console.log(rectHeight); // 输出可能是 "50"

// 或者获取实际渲染高度
let rectComputedHeight = window.getComputedStyle(rectElement).height;
console.log(rectComputedHeight); // 输出可能是 "50px"

应用场景

图形设计软件：在图形设计软件中，实时获取SVG元素的高度有助于动态调整布局。
数据可视化：在数据可视化应用中，获取SVG图表的高度可以帮助适配不同的屏幕尺寸和分辨率。
交互式网页：在构建交互式网页时，了解SVG元素的实际高度有助于实现更精确的动画效果和用户交互。

可能遇到的问题及解决方法

获取到的高度为百分比值：如果SVG元素的高度是以百分比设置的，getAttribute方法会返回百分比字符串。如果需要实际像素值，可以使用getComputedStyle方法。
跨浏览器兼容性：不同浏览器可能会有不同的实现细节，建议进行充分的跨浏览器测试。

示例代码

以下是一个完整的示例，展示了如何获取SVG元素及其内部元素的高度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Height Example</title>
</head>
<body>
<svg id="mySvg" width="200" height="100">
  <rect id="myRect" x="10" y="10" width="50" height="50" fill="blue"/>
</svg>

<script>
// 获取SVG元素的高度
let svgHeight = document.getElementById('mySvg').getAttribute('height');
console.log('SVG Height:', svgHeight);

// 获取SVG内部rect元素的高度
let rectHeight = document.getElementById('myRect').getAttribute('height');
console.log('Rect Height:', rectHeight);

// 获取实际渲染高度
let computedSvgHeight = window.getComputedStyle(document.getElementById('mySvg')).height;
let computedRectHeight = window.getComputedStyle(document.getElementById('myRect')).height;
console.log('Computed SVG Height:', computedSvgHeight);
console.log('Computed Rect Height:', computedRectHeight);
</script>
</body>
</html>

通过上述方法，你可以有效地获取SVG元素及其内部元素的高度，并根据需要进行相应的处理和应用。