如何在JS/TS中获取SVG内百分比宽度图片的真实尺寸

在SVG中使用百分比设置<image>元素的width属性时，直接调用clientWidth会返回0（该属性不适用于SVG元素），而SVG容器的clientWidth能正常获取（比如你的例子中返回300）。要获取图片的真实渲染尺寸，可以用以下几种方法：

方法1：使用getBBox()（推荐） #

SVG元素自带的getBBox()方法会返回元素在SVG坐标系下的真实边界框，包含渲染后的width和height。注意必须在图片加载完成后调用，否则会得到错误结果。

示例代码：

const imgEl = document.getElementById("content-image");
const svgEl = document.getElementById("svg-container");

imgEl.addEventListener('load', () => {
  const bbox = imgEl.getBBox();
  console.log('图片真实宽度:', bbox.width);
  console.log('图片真实高度:', bbox.height);
});

方法2：结合容器尺寸与百分比计算 #

如果已知图片的百分比宽度，可以通过SVG容器的真实宽度乘以百分比得到图片宽度：

const svgWidth = svgEl.clientWidth;
const imgPercent = parseFloat(imgEl.getAttribute('width'));
const realImgWidth = svgWidth * (imgPercent / 100);
console.log('图片真实宽度:', realImgWidth);

这种方法的局限性是需要依赖图片本身的宽高比或SVG的preserveAspectRatio设置，才能准确计算高度，而getBBox()可以直接获取渲染后的真实高度。

方法3：使用getBoundingClientRect() #

该方法返回元素在视口中的位置和尺寸，同样能得到真实渲染的宽高：

imgEl.addEventListener('load', () => {
  const rect = imgEl.getBoundingClientRect();
  console.log('图片真实宽度:', rect.width);
  console.log('图片真实高度:', rect.height);
});

为什么原代码输出0？ #

因为<image>是SVG元素，不是普通HTML元素，clientWidth这类针对HTML元素的尺寸属性对它不生效。同时如果图片未加载完成，也无法获取正确的渲染尺寸，因此必须等待图片加载完成后再调用相关API。

内容的提问来源于stack exchange，提问作者Alessio Palmero Aprosio