html - 如何使svg图像适合父容器

我第一次使用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%;
  }
}

我想使图像适合 parent 的容器。像背景一样:用CSS覆盖。有人有主意吗？

您可以在https://codepen.io/seabon/pen/QvBBrd上查看



蓝色背景是div.item

最佳答案

更新了

添加width="100%"和height="100%"属性。

将 preserveAspectRatio 1 添加为的值none 2 。

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>

注意:

该preserveAspectRatio属性的使用最初是由另一个答案提供的-我忘记了用户，尽管非常感谢他-但它被删除了，在那个答案中，该属性是preserveAspectRatio="xMidYMid slice"，但没有使用width="100%" height="100%"，但CSS中的不如[@Paul LeBeau答案]中所述，[部分原因是，如果您将 View 调整为更大的尺寸，则蓝色背景将开始显示]。这个jsFiddle Demo代表了这个好答案。

none 不会强制缩放比例尺，但可能会挤压或拉伸(stretch)图像以使其合适，Min或Mid的Max和x可以使用，但必须仅与y一起使用，而不能与slice一起使用。