Как использовать черное изображение в качестве маски svg?

первое изображение маски

второе изображение маски

почему бы не использовать первое изображение маски?

<svg width='200' height='200' baseProfile='full' version='1.2'>
  <defs>
    <mask id='svg_mask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
      <image  width='200' height='200'
             xlink:href='http://i.stack.imgur.com/SXnMG.png' />
    </mask>
  </defs>
  <image mask='url(#svg_mask)' width='200' height='200' y='0' x='0'
         xlink:href='http://static.timeface.cn/times/0f62b706f726d823393290ef1ee60944.jpg' />
</svg>

svg svg-filters
person MFLife    schedule 28.09.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

По сути, при использовании изображения в качестве маски вносят свой вклад белые области. Итак, если у вас есть черное/прозрачное изображение, вы не получите никакого эффекта. Однако мы можем преобразовать изображение, прежде чем пытаться использовать его в качестве фильтра. Если мы используем feColorMatrix, мы можем определить матрицу, которая будет инвертировать цвета для нас. Применяя этот фильтр непосредственно к изображению, а затем используя (преобразованное) изображение в качестве маски, мы можем добиться округления.

Я также добавил атрибут xmlns к корневому узлу и удалил префиксы пространств имен xlink:.

<svg xmlns="http://www.w3.org/2000/svg" width='200' height='200' baseProfile='full' version='1.2'>
  <defs>
	<filter id='negative'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter>
	
    <mask id='svg_mask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
      <image  filter='url(#negative)' width='200' height='200' href='http://i.stack.imgur.com/T5BQj.png' />
    </mask>
  </defs>
  <image mask='url(#svg_mask)' width='200' height='200' y='0' x='0' href='http://static.timeface.cn/times/0f62b706f726d823393290ef1ee60944.jpg' />
</svg>

Спасибо https://gist.github.com/brysongilbert/6062276 за код фильтра.

Другой вопрос, касающийся инверсии цвета SVG: Как инвертировать белое изображение в черное с помощью фильтров SVG?

person enhzflep    schedule 28.09.2016