Question

我有一个带有emebedded图像元素的SVG文档，如下所示：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 200 200">
  <image xlink:href="hannibal.jpg" x="0" y="0" width="200" height='200' />
</svg>

我无法提前知道链接图像的宽度和高度。

如何将图像的宽度设置为与viewBox相同，并允许高度自动缩放？

如果失败了，我可以将图像内容对齐到图像元素的顶部吗？

Answer 1

如果您希望图片位于viewBox的顶部，而不是中心，则只需设置preserveAspectRatio="xMidYMin"。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 200 200">
  <image xlink:href="hannibal.jpg" x="0" y="0" width="200" height="200"
         preserveAspectRatio="xMidYMin"/>
</svg>

只要高度不超过宽度，这就应该有效。

我可以在SVG文档中保留图像元素的宽高比吗？

1 个答案: