如何在相对尺寸的SVG中居中任意宽高比的动态加载图片？

要实现动态加载的未知宽高比图片在百分比尺寸的SVG中自动居中，无需逐个修改图片位置，给<image>元素添加几个关键属性即可，具体方案如下：

修改后的完整SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect width="100%" height="100%" fill="#e44" />
    <image href="./image.png" x="16%" y="16%" width="68%" height="68%" preserveAspectRatio="xMidYMid meet" />
</svg>

关键属性解析 #

• viewBox="0 0 100 100"：给SVG设置固定的100×100坐标系，让百分比尺寸的计算更稳定，避免因SVG自身宽高变化导致定位偏差。
• x="16%" y="16%"：通过(100% - 68%)/2计算得出，确保图片容器在SVG画布中上下左右居中。你可以根据需求调整68%这个占比数值，同时同步修改x、y的百分比（公式为(100% - 目标占比)/2）。
• preserveAspectRatio="xMidYMid meet"：这是自适应居中的核心属性——它会让图片保持原始宽高比缩放，刚好填满设定的区域（不会超出），同时自动在区域内水平、垂直居中，完美适配任意宽高比的图片。

如果需要图片占满整个SVG画布并居中，只需调整<image>属性为：

<image href="./image.png" x="0%" y="0%" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" />

这样设置后，无论后续加载的图片是横版还是竖版，都能自动居中显示，无需修改SVG代码。

内容的提问来源于stack exchange，提问作者AxD