Я хотел бы создать шаблон, загрузив изображение и применив к нему многократный цветной фильтр.Однако я думаю, что у меня проблемы с пониманием свойств in и in2, потому что они не работают.
Я пытаюсь создать <img> и установить fill="green", а затем использовать in="SourceGraphic" in2="FillPaint".Но я вижу полностью белое полотно как в Firefox, так и в хроме.Кто-нибудь знает, почему это не работает?Работает ли смесь с in*="FillPaint"?Я также попытался использовать отдельный прямоугольник и изображение и смешать их с in2="BackgroundImage", но это тоже не сработало.Может быть, потому что «фон» - это не то, что я думаю, когда я внутри pattern?
Вот мой код:
<filter id="multiply" primitiveUnits="objectBoundingBox">
<feBlend in="SourceGraphic" in2="FillPaint" mode="multiply"/>
</filter>
<pattern id="pattern" x="0" y="0" width="32" height="32" viewBox="0 0
32 32" patternUnits="userSpaceOnUse">
<image x="0" y="0" width="32" height="32" fill="green" xlink:href=
"dirt.png" filter="url(#multiply)"/>
</pattern>
<rect x="0" y="0" width="64" height="64" fill="url(#pattern)"/>