SVG中高度可变的image元素如何实现底部中心对齐指定坐标

不需要JS读取图片尺寸，纯CSS即可实现需求，无额外性能开销。
你遇到的百分比transform偏移不符合预期的问题，核心原因是SVG元素默认的transform计算参考盒是整个SVG视图盒，而非元素自身。

最优实现（全现代浏览器兼容） #

使用CSS的transform-box属性修改transform的参考坐标系即可：

• 给目标<image>元素添加transform-box: fill-box声明，该配置会让transform属性的百分比值以当前图片元素自身的边界盒为基准计算，不再参考父级SVG的尺寸
• 要实现图片底部中心点对齐指定坐标(targetX, targetY)，无需手动计算宽度偏移，直接把image的x、y属性设为目标坐标值，再通过transform做偏移即可，图片宽高动态变化时偏移量会自动适配：

<svg width="100%" height="100%">
  <!-- 示例：图片底部中心点对齐(100,100)坐标 -->
  <image 
    x="100" 
    y="100" 
    width="50" 
    href="你的图片路径"
    style="
      transform-box: fill-box;
      /* X轴左移自身宽度一半实现水平居中，Y轴上移自身高度实现底边对齐目标Y坐标 */
      transform: translate(-50%, -100%);
    "
  ></image>
  <!-- 其他元素 -->
</svg>

兼容性说明：该方案支持Chrome、Edge、Firefox、Safari 11及以上版本，覆盖目前98%以上的用户使用场景。

之前写法失效的原因 #

直接写transform: translate(0, -100%)时，SVG元素默认的transform-box值为view-box，百分比是相对于整个SVG画布的尺寸计算的，因此偏移量完全不符合预期，加上transform-box: fill-box后即可解决该问题。

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