Фильтр SVG применяет фильтр только к непрозрачной области

Давайте применим фильтр к изображению с прозрачностью. Мне нужно, чтобы этот фильтр применялся только к непрозрачной области, другими словами, я думаю, где альфа не равна нулю. Вы можете видеть в примере, что текущая прозрачная область заполнена цветом заливки. Возможно ли это?

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}
<svg>
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feFlood flood-color="#3a0339" result="flood"/>
      <feBlend mode="exclusion" in="flood" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">


svg filter css svg-filters
person Viktor Stolbin    schedule 16.05.2017    source источник
comment
feBlend не поддерживает исключение — только нормальное, умножение, экранирование, осветление и затемнение. (Вы также можете имитировать жесткий и мягкий свет, поработав немного )   -  person Michael Mullany    schedule 17.05.2017
comment
@MichaelMullany это действительно так, вы можете запустить пример самостоятельно. Пожалуйста, проверьте этот stackoverflow.com/questions/43991821/   -  person Viktor Stolbin    schedule 18.05.2017
comment
Да, это было для меня новостью! Приятно видеть, что больше спецификаций Filters 1.0 перенесено в браузеры :)   -  person Michael Mullany    schedule 19.05.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать узел feComposite, чтобы применить альфа-канал исходной графики к выходным данным фильтра flood:

svg {
  width: 0;
  height: 0;
}
.myFilter {
  filter: url(#myFilter);
}
<svg>
  <defs>
    <filter id="myFilter" x="0" y="0" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feFlood flood-color="#3a0339" result="flood"/>
      <feComposite in="flood" in2="SourceAlpha" operator="in" result="flood_alpha"/>
      <feBlend mode="exclusion" in="flood_alpha" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

<img class="myFilter" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png">

person r3mainer    schedule 17.05.2017
comment
Я также думаю, что вы имеете в виду узел feComposite, а не узел feBlend, поскольку это то, что написано в коде, который вы написали - отредактировал ответ, чтобы отразить это. В SVG 1.1 - feBlend не поддерживает исключение - только нормальное, умножение, экранирование, осветление и затемнение. Другие режимы добавляются как часть спецификации Web Filters 1.0. но это еще не кросс-браузер. - person Michael Mullany; 17.05.2017
comment
@MichaelMullany Извините, да. Виноват. - person r3mainer; 17.05.2017