我可以保留 SVG 文档中图像元素的纵横比吗？答案

【问题标题】：Can I preserve the aspect ratio of an image element in an SVG document?我可以保留 SVG 文档中图像元素的纵横比吗？
【发布时间】：2015-05-08 16:41:52
【问题描述】：

我有一个带有嵌入图像元素的 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 相同，并允许高度自动缩放？

如果做不到这一点，我可以将图像内容与图像元素的顶部对齐吗？

【问题讨论】：

您是否尝试过将宽度/高度/两者都设置为 100% 或只是删除它们？
如果您删除它们，则不会显示图像。将它们设置为 100%，它们将获得视图框的宽度和高度，其中图像内容居中。
嗯，有一个类似的问题：stackoverflow.com/questions/6884513/… 第一个答案对你有帮助吗？
也许 JavaScript 是解决方案。似乎应该有一个 SVG 解决方案来嵌入具有正确宽度和高度的图像。
自动缩放是指它必须覆盖 svg 文档吗？

标签： html svg

【解决方案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>

只要高度永远不会大于宽度，这应该可以工作。

【讨论】：