如何使 svg 图像适合父容器

Question

我第一次使用 svg<image>标签。我使用这个标签是为了在图片上应用灰色过滤器（谢谢 IE）。

这是我的 HTML ：

<div class="container">
  <div class="item">
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        <image  xlink:href="https://dummyimage.com/400x400/000/00ffd5.png" />
    </svg>
  </div>
</div> 

和 scss ：

.item {
  position: relative;
  width: 20%;
  height: 220px;

  background-color: blue;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}

我想使图像适合父级的容器。类似背景的东西：用 css 覆盖。有人有想法吗？

您可以在以下位置查看：https : //codepen.io/seabon/pen/QvBBrd

蓝色背景是为了 div.item

Answer 1

更新

• 添加width="100%"和height="100%"属性。
• 加入¹ 与值²。 preserveAspectRatio none

  none不强制统一缩放。如有必要，非均匀缩放给定元素的图形内容，以便元素的边界框与视口矩形完全匹配。
  注意：如果<align>为 none，则<meetOrSlice>忽略可选值。

jsFiddle - 在 Chrome、FF 和 IE11 上测试

.item { position: relative; width: 20%; height: 220px; background-color: blue; }
svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

<div class="item">
  <svg id="theSVG" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
      <image width="100%" height="100%" xlink:href="//dummyimage.com/400x400/000/00ffd5.png" preserveAspectRatio="none" />
    </svg>
</div>

笔记：

1. 这个preserveAspectRatio属性的使用最初是由另一个答案提供的 -我忘记了用户，但非常感谢他- 它被删除了，在那个答案中，该属性是preserveAspectRatio="xMidYMid slice"但没有使用width="100%" height="100%"，除了 CSS 中的那些不起作用，除了[部分原因是，如果您将视图调整得更大，蓝色背景将开始显示] 在 Chrome 中，如@Paul LeBeau 的回答所述。这个jsFiddle Demo代表了这个很好的答案。
2. none并不强制的规模上均匀，其可压扁或拉伸图像，使其配合，尽管它不会使在OP的情况下的任何差异，如果需要保鲜的纵横比，那么任何的其它 Min，Mid以及Max用于x或y可以使用，但必须伴随sliceonly 和 not meet。