html - 垂直对齐 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>