Преобразование фильтров CSS в фильтр SVG

У меня есть рабочие фильтры CSS для элементов <img />, как я хочу.

eg.

filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px);

Моя цель — применить те же свойства фильтра к тегу <image /> внутри файла SVG.

Однако такие вещи, как

<g style="-webkit-filter: contrast(67%) saturate(250%);">
    <image xlink:href="image.jpg" />
</g>

or 

<image xlink:href="image.jpg" style="-webkit-filter: contrast(67%) saturate(250%) sepia(40%)"/>

не работает.

Поэтому, скорее всего, мне придется комбинировать фильтры CSS с фильтрами SVG.

На веб-платформе.org я нашел представление SVS определенных эффектов фильтра CSS, например:

затем я попытался объединить сгенерированные фильтры с feMerge.

<filter id="clip_1-filter-90117969876336">
    <feComponentTransfer in="SourceGraphic" result="brightness-filter">
      <feFuncR type="linear" slope="22"></feFuncR>
      <feFuncG type="linear" slope="22"></feFuncG>
      <feFuncB type="linear" slope="22"></feFuncB>
    </feComponentTransfer>

    <feComponentTransfer in="brightness-filter" result="contrast-filter">
      <feFuncR type="linear" slope="-15" intercept="7"></feFuncR>
      <feFuncG type="linear" slope="-15" intercept="7"></feFuncG>
      <feFuncB type="linear" slope="-15" intercept="7"></feFuncB>
    </feComponentTransfer>

    <feColorMatrix in="contrast-filter" result="grayscale-filter" type="matrix" values="
       1 0 0 0 0
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 1 0"></feColorMatrix>

    <feComponentTransfer in="SourceGraphic" result="invert-filter">
      <feFuncR type="table" tableValues="0 1"></feFuncR>
      <feFuncG type="table" tableValues="0 1"></feFuncG>
      <feFuncB type="table" tableValues="0 1"></feFuncB>
    </feComponentTransfer>

    <feMerge>
      <feMergeNode in="grayscale-filter"></feMergeNode>
    </feMerge>
    </filter>

Однако результаты далеки от ожидаемых.

Каков правильный способ перевода фильтров CSS в SVG?


svg html css css-filters svg-filters
person michaltaberski    schedule 18.04.2016    source источник
comment
Спецификация фильтров CSS имеет эквиваленты SVG для каждого фильтра CSS: w3.org/TR. /filter-effects-1/#grayscaleEquivalent   -  person Robert Longson    schedule 18.04.2016
comment
Михал. Я заметил, что у вас есть послужной список того, что вы не принимаете ответы на свои вопросы. Знаете ли вы, что это хорошее поведение сообщества, если вы нажмете на галочку под вопросом, который хотите принять.   -  person Michael Mullany    schedule 28.04.2016

Ответы (2)


arrow_upward
3
arrow_downward

Ваш фильтр выглядит в основном правильно, за исключением того, что я подозреваю, что в вашем атрибуте feComponentTransfer in есть опечатка. Я думаю, вы, вероятно, имели в виду:

<feComponentTransfer in="grayscale-filter" result="invert-filter">

Обратите внимание, что вам не нужно использовать result и in, если вход каждого этапа является выходом последнего.

Кроме того, последний feMerge не нужен, если есть только один узел.

<svg width="5cm" height="5cm" viewBox="0 0 500 500">
  <defs>
  <filter id="clip_1-filter-90117969876336">
    <feComponentTransfer in="SourceGraphic">
      <feFuncR type="linear" slope="22"></feFuncR>
      <feFuncG type="linear" slope="22"></feFuncG>
      <feFuncB type="linear" slope="22"></feFuncB>
    </feComponentTransfer>

    <feComponentTransfer>
      <feFuncR type="linear" slope="-15" intercept="7"></feFuncR>
      <feFuncG type="linear" slope="-15" intercept="7"></feFuncG>
      <feFuncB type="linear" slope="-15" intercept="7"></feFuncB>
    </feComponentTransfer>

    <feColorMatrix type="matrix" values="
       1 0 0 0 0
       0 1 0 0 0
       0 0 1 0 0
       0 0 0 1 0"></feColorMatrix>

    <feComponentTransfer>
      <feFuncR type="table" tableValues="0 1"></feFuncR>
      <feFuncG type="table" tableValues="0 1"></feFuncG>
      <feFuncB type="table" tableValues="0 1"></feFuncB>
    </feComponentTransfer>
  </filter>
  </defs>

  <image xlink:href="http://lorempixel.com/500/500/"
         width="500" height="500" filter="url(#clip_1-filter-90117969876336)"/>
  <rect fill="none" stroke="blue"  
        x="1" y="1" width="498" height="498"/>
</svg>

person Paul LeBeau    schedule 18.04.2016

arrow_upward
1
arrow_downward

Ваш feColorMatrix в настоящее время является матрицей идентичности, а не фильтром оттенков серого, а ваш третий feComponentTransfer также является преобразованием идентичности (которое (0 1) оставляет все цвета такими, какие они есть — вы, вероятно, имели в виду (1 0).)

Я не знаю, каково намерение последнего слияния. Вы хотите смешать результаты инверсии с оттенками серого? Или вы хотите инвертировать оттенки серого.

Взгляните на документ по веб-платформе для feColorMatrix и вступительная статья, которую я написал для журнала .NET, чтобы начать работу. После этого я бы посоветовал прочитать спецификацию, на которую Роберт ссылается в комментарии.

person Michael Mullany    schedule 18.04.2016