垂直对齐svg

Question

如何将图像垂直对齐svg？

我看到this并没有帮助。正如你可以从the jsfiddle尝试dominant-baseline: central;无效或我做错了。

对所提供的任何帮助表示感谢。

代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将图像的高度设置为100％（或您想要使图像居中的任何高度），并另外设置属性preserveAspectRatio="xMidYMid meet"。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;