How to make svg image fits to parent container

user_5980253 0
Viewed 17061

I am using for the first time the svg <image> tag. I use this tag in order to apply a gray filter on the picture (thank you IE).

Here is my 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>

And the 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%;
  }
}

I want to fit the image to the parent's container. Something like background: cover in css. Does anybody have an idea ?

You can check it out at : https://codepen.io/seabon/pen/QvBBrd

enter image description here

The blue background is for div.item

svg css html
4 Answers

Struggled with the same. The image sourcegraphic might not be your best option.

If you want cover fit try using a background image as you normally would and apply a filter to the element by referencing an SVG filter.

Example 

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

Demo: https://codepen.io/Andersdn11/pen/QXWmgr

user_25399650
Related