Вертикально выровнять изображение внутри SVG

Question

Как я мог выровнять изображение по вертикали внутри svg?

Я видел это , и это не помогло.Как вы можете сказать из попытка 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>