Использование фильтров смешивания (умножение более конкретно) с помощью SVG

У меня есть эталонный образ эффекта, который я пытаюсь достичь с помощью SVG.

Bitmap reference image

в Photoshop эффект может быть достигнут с помощью 100% непрозрачности с режимом смешивания, установленным на "умножить"

цвета имеют шестнадцатеричные значения:

красный: #EA312F, синий: #3A5BA6 и площадь перекрытия: #35111F

Я пробовал несколько подходов с использованием фильтров SVG для достижения аналогичного эффекта, но изо всех сил пытаюсь понять, как режимы наложения вычисляют значения.

SVG attempts to match original graphic

  1. оригинальный растровый Photoshop
  2. SVG, используя только формы без фильтров
  3. SVG с помощью фильтра умножения на вертикальной панели
  4. SVG с помощью фильтра умножения и непрозрачности на вертикальной панели

вы можете увидеть код SVG для каждого из них в это JSBin http://jsbin.com/iPePuvoD/1/edit

Я действительно изо всех сил пытаюсь понять лучшее подходите, чтобы соответствовать синему цвету вертикальной полосы и цвету перекрывающейся области.

каждую из этих фигур я также хотел бы анимировать с помощью библиотеки, такой как http://snapsvg.io/, поэтому я надеюсь полагаться исключительно на фильтры, а не на обрезку или другие операции для достижения желаемых результатов, но я открыт для предложений.

эффективно, SVG для финальной попытки (4.) это:

<svg viewBox="0 0 96 146" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feBlend in="SourceGraphic" mode="multiply"/>
      <feBlend in="SourceGraphic" mode="multiply"/>
    </filter>
  </defs>
  <g id="f_shape">
    <rect x="0" y="0" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="96" height="32" fill="#EA312F" />
    <rect x="0" y="50" width="32" height="96" opacity="0.8" fill="#3A5BA6" filter="url(#f_multiply)" />
  </g>
</svg>

был бы очень признателен за некоторые советы по этому поводу, Я нашел некоторые хорошие ресурсы на SVG, но эта область по-прежнему кажется довольно сложной для получения хорошей информации.

спасибо!

13
blending colors svg svg-filters vector-graphics

3 ответов

Это не будет работать на нескольких уровнях. Feblend принимает два входа а не один. Что вы смешивали с sourcegraphic? Если вы хотите смешаться с фоном, вам нужно использовать backgroundImage в качестве in2. Если вы хотите смешаться с другой формой, вы должны импортировать эту форму в фильтр с feimage. Следующая проблема BackgroundImage работает только в IE на данный момент, и feImage работает только для ссылочных фигур в Chrome и Safari (обновление :вы можете конвертировать ссылочные фигуры в встроенный SVG data-URI, и это будет работать через браузер).

Если вы используете только цветные прямоугольники, вы можете генерировать их внутри фильтра с помощью feflood и смешивать их там. Что-то вроде следующего:

<svg x="800px" height="600px" viewBox="0 0 200 100" version="1.1" id="f-multiply-opacity" preserveAspectRatio="xMinYMin meet">
  <defs>
    <filter id="f_multiply" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feFlood x="0" y="0" width="96" height="32" flood-color="#EA312F" result="a"/>
      <feFlood x="0" y="50" width="96" height="32" flood-color="#EA312F" result="b"/>
      <feFlood rect x="0" y="50" width="32" height="96" flood-opacity="0.8" flood-color="#3A5BA6" result="c"/>
      <feBlend in="a" in2="b" result="ab" mode="multiply"/>
      <feBlend in="ab" in2="c" mode="multiply"/>
     </filter>
  </defs>
  <g id="f_shape">
    <rect filter="url(#f_multiply)" x="0" y="0" width="200" height="200"/>
  </g>
</svg>

обновление: Кросс-платформенный способ использования фигур в фильтре-кодировать их как URI данных SVG/XML в feImage. Это поддерживается кросс-браузером (хотя это делает код довольно трудным для чтения.)

7

посмотреть Compositing и смешивания Уровень 1 spec. Он позволяет указать композицию и смешивание для использования при рендеринге веб-контента (включая svg). Он тестируется в нескольких браузерах путем переключения флага времени выполнения, см. здесь инструкции. Для современной поддержки браузера mix-blend-mode посмотреть caniuse.

<svg>
  <style>
    circle { mix-blend-mode: multiply; }
  </style>
  <circle cx="40" cy="40" r="40" fill="#EA312F"/>
  <circle cx="80" cy="40" r="40" fill="#3A5BA6"/>
</svg>

Как jsfiddle здесь.

5

для всех режимов feBlend непрозрачность результата вычисляется следующим образом:

qr = 1 - (1-qa)*(1-qb)

для приведенных ниже формул композиции применяются следующие определения:

cr = Result color (RGB) - premultiplied 
qa = Opacity value at a given pixel for image A 
qb = Opacity value at a given pixel for image B 
ca = Color (RGB) at a given pixel for image A - premultiplied 
cb = Color (RGB) at a given pixel for image B - premultiplied 
The following table provides the list of available image blending modes:

Формула режима смешивания изображений для вычисления цвета результата

normal  cr = (1 - qa) * cb + ca
multiply    cr = (1-qa)*cb + (1-qb)*ca + ca*cb
screen  cr = cb + ca - ca * cb
darken  cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
lighten cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

от http://www.w3.org/TR/SVG/filters.html#feBlendElement

0