垂直对齐 svg 内的图像

Question

如何在svg 中垂直对齐图像？

我看到this 并没有帮助。从the jsfiddle 可以看出，尝试dominant-baseline: central; 不起作用或者我做错了什么。

将感谢您提供的任何帮助。

代码：

<svg style="background-color:#f1fe96; border: 1px black solid;">
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width ="50" height = "50" style="dominant-baseline: central;"/>
  
</svg>

Answer 1

将图像的高度设置为 100%（或您希望图像居中的任何高度）并另外设置属性 preserveAspectRatio="xMidYMid meet"。

<svg style="background-color:#f1fe96; border: 1px black solid;">
  
  <image href="https://media.istockphoto.com/photos/plant-growing-picture-id510222832" width="50" height="100%" preserveAspectRatio="xMidYMid meet"/>
  
</svg>