SVG-фильтры W3C в оттенках серого

Я пытаюсь изменить фильтр оттенков серого W3C, найденный здесь: http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent

Это до смешного просто в webkit, но я даже использую это только потому, что Gecko поддерживает вызов фильтров только через filters:url(filter.svg) в CSS. У меня не так много опыта работы с SVG, и несколько раз, когда я возился с ними, у них были довольно четкие значения в процентах, но с оттенками серого все немного сложнее.

Итак, вот код в файле SVG.

 <svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</svg>

В частности, я ищу оттенки серого до 90%, чтобы было видно только 10% цвета, но я понятия не имею, как работает этот фильтр. Я нашел этот документ здесь http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent, что должно иметь смысл


svg html css svg-filters
person little tiny man    schedule 23.04.2014    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Более простой способ сделать это - просто использовать тип насыщенности для feColorMatrix (хотя математика, чтобы сделать то, что вы хотите с матрицей, несложна - если вы можете делать арифметику, вы должны быть в состоянии следовать этой спецификации.)

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="saturate" values="0.10"/>
  </filter>
</svg>
person Michael Mullany    schedule 23.04.2014

arrow_upward
-1
arrow_downward

Попробуйте <feColorMatrix type="luminanceToAlpha" /> в качестве атрибута. Это даст вам что-то похожее на шкалу серого.

person ramesh    schedule 23.04.2014
comment
Это устанавливает яркость на прозрачность - результат обычно монохроматичен, но вряд ли такой же результат, как оттенки серого. - person brichins; 01.12.2016