svg фильтры для IE

170

01 февраля 2019, 12:00

Не пойму как работать с -ms-filter.Подключаю SVG фильтр из внешнего файла, но с IE такое не прокатывает. Как быть?

img { 
  filter: url(../img/svg/filters.svg#red); 
  -webkit-filter: url(../img/svg/filters.svg#red); 
  -o-filter: url(../img/svg/filters.svg#red); 
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
  <defs> 
    <filter id="red"> 
      <feColorMatrix type = "matrix" values="0.84 0 0 0 0 
                                             0 0.04 0 0 0 
                                             0 0 0.04 0 0 
                                             0 0 0 0.75 0" 
      /> 
    </filter> 
  </defs> 
</svg>

Answer 1

На мой взгляд тут есть 2 варианта решения:

Применять svg-фильтры к svg-элементам

#defs{ 
  position:absolute 
} 
.img{ 
  width:300px; 
  height:225px; 
}

<svg id="defs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
        <filter id="red"> 
            <feColorMatrix 
                    type = "matrix" 
                    values="0.84  0     0     0     0 
                            0     0.04  0     0     0 
                            0     0     0.04  0     0 
                            0     0     0     0.75  0 "/> 
        </filter> 
    </defs> 
</svg> 
 
<svg class="img"> 
  <image href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMidYMidslice" filter="url(#red)" /> 
</svg>

Похожий эффект можно получить используя цветную подложку и прозрачность картинки

.img{ 
  display:inline-block; 
  background-color:red; 
  max-width:100%; 
} 
.img img{ 
  display:block; 
  width:100%; 
  opacity:.45; 
}

<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Bliss_location%2C_Sonoma_Valley_in_2006.jpg/300px-Bliss_location%2C_Sonoma_Valley_in_2006.jpg" alt="" /></div>