如何使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 ² 。

    

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

jsFiddle - 在Chrome，FF和IE11上测试

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

备注：

1. 这个preserveAspectRatio属性的使用最初由另一个答案提供 - 我忘记了用户，非常感谢他，但是 - 并且它已被删除，在该答案中该属性为{ {1}}但是没有使用preserveAspectRatio="xMidYMid slice"，除了CSS中除了[部分之外没有工作的那些人之外，因为如果你调整视图大小，蓝色背景将开始显示@Paul LeBeau回答中说明了Chrome中的em>]。这个jsFiddle Demo代表了这个不错的答案。
2. width="100%" height="100%" 如果需要保持宽高比，那么在OP情况下会有任何差异，那么none或{{1} Min Mid，Max和x中的任意一个可以使用，但必须只附加y而不是slice。

Answer 2

如果您不必使用图像标签，我的解决方案是CSS：

.item-image{
 width:100%;
 height:100%;
 background: url(https://dummyimage.com/400x400/000/00ffd5.png) center;
background-size: 100% 100% ;
}

- 不要忘记使用item-image类在svg标记之间创建div。

Codepen

There是一个可以播放背景大小的网站。您可以通过为div分配id并使用JS添加属性来更改每个元素的背景。

Answer 3

只需在SVG上设置适当的viewBox属性即可。然后将preserveAspectRatio设置为使用slice选项的值，而不是默认的meet。例如：

preserveAspectRatio="xMidYMid slice"

这相当于CSS＆＃39; background-size: cover。

顺便说一下，通过CSS设置width和height只能在Chrome上运行。如果您希望您的示例在其他浏览器中工作，您需要在SVG中分配这些内容。

＆＃13;

＆＃13;

<image>

＆＃13;

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

  background-color: blue;
}

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

苦苦挣扎。图像来源图形可能不是您的最佳选择。

如果要覆盖，请像往常一样尝试使用背景图片，并通过引用SVG滤镜将滤镜应用于元素。

示例

.bg_img {
    -webkit-filter: url(#distort_slider_filter);
    filter: url(#distort_slider_filter);
}

演示： https://codepen.io/Andersdn11/pen/QXWmgr