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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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