通过 img 嵌入时将 SVG 定位到左侧
Posted
技术标签:
【中文标题】通过 img 嵌入时将 SVG 定位到左侧【英文标题】：Position SVG to the left when embedded via img 【发布时间】：2017-06-28 18:54:33 【问题描述】：我正在嵌入一个 100% 宽度和自动高度的 SVG。最大高度为视口的 80%。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
html, body
width: 100%;
height: 100%;
img
width: 100%;
height: auto;
max-height: 80vh;
</style>
</head>
<body>
<img src="example.svg">
</body>
</html>
如果 SVG 不适合 80% 的视口，它将按照指定的最大高度进行裁剪。问题是这也使 SVG 居中：
我需要通过 <img> 保持嵌入，因为这是我从 CMS 收到的内容，并将 SVG 定位到左侧，就像 background-position: left top; 会做的那样。即使图像被裁剪，如何将<img> 内容定位到左侧？
【问题讨论】：
空白在您的 svg 中。所以你必须使用一些软件，比如 illustrator 或一些在线工具来删除那个空白。.. 不，我用 Illustrator 检查了文件，空白是由 CSS 样式/HTML 生成的。它不包含在 SVG 中！ 你能分享一个小提琴演示吗？ 【参考方案1】：尝试将preserveAspectRatio="xMinYMin meet" 添加到 svg 文件的根 svg 元素，如下所示。
<svg
viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet">
<rect fill="red"/>
</svg>
【讨论】：
你想要 preserveAspectRatio="xMinYMin meet" 还是 preserveAspectRatio="none" ？ preserveAspectRatio="xMinYMin meet" 有效，更新你的答案，我会接受它【参考方案2】：你有没有尝试过：
float:left;
【讨论】：
这个没用，因为图片的宽度是100%，所以不管有没有float:left;、display:block或者display:inline-block以上是关于通过 img 嵌入时将 SVG 定位到左侧的主要内容，如果未能解决你的问题，请参考以下文章