Question

我正在尝试让svg图像与兄弟div内容很好地扩展（http://coub.com/view/5tbis），这样它们看起来就像是一件事。我设法让它在fireforx中工作，但不是在chrome中，即所有最新版本。这是我的代码：

<!DOCTYPE html>
<html>

<body>
  <div style="display: flex; height: 10em;">
    <div style="height: 100%">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; " viewBox="0 0 400 400">
        <rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" />
        <rect x="0" y="200" width="400" height="200" fill="green" stroke="black" />
        <circle cx="200" cy="200" r="100" stroke="black" stroke-width="3" fill="red" />
      </svg>
    </div>
    <div style="display: flex; flex-direction: column; width: 100%">
      <div style="flex: 1; background-color: green">&nbsp;</div>
      <div style="flex: 1; background-color: yellow">&nbsp;</div>
    </div>
  </div>

</body>

</html>

在IE和Chrome中，svg和Chome周围有一个空白区域，svg比例并不总是与div的比例相匹配。

非常感谢任何帮助。

更新：好的，preserveAspectRatio =“none”修复了ie和chrome的问题，但我仍然不明白他们为什么会这样做？包装器div没有宽度，为什么svg不会根据自己的宽度改变它？

更新：preserveAspectRatio =“xMidYMid slice”使它更好，但仅适用于ff和ie

与div一起缩放svg图像

0 个答案: