1

Не пойму как работать с -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>

1

1 ответ 1

2

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

  1. Применять 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>

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

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

2
  • Как по мне второй вариант практичнее в некоторых случаях=)
    – Arthur
    5 окт 2018 в 23:01
  • 1
    @Arthur , первый вариант тут так, для общего развития и на правах выпендрёжа.=) Понятно, что на практике такое городить никто не будет.
    – zhurof
    6 окт 2018 в 6:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.