1
Я хотел бы создать шаблон, загрузив изображение, а затем применив на него многоцветный фильтр. Однако, я думаю, что у меня возникли проблемы с пониманием свойств in и in2, потому что он не работает.SVG feBlend в шаблоне?
Что я пытаюсь создать <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)"/>
Я только заметил, что пример feBlend в документации SVG: http://www.w3.org/TR/SVG/images/filters/feBlend.svg не работает ни в одном браузере ... – Saucerful
Этот пример работает в Inkscape. Конечно, если вы их создаете для использования в браузерах, это не поможет. –
Хорошо, проблема заключается в реализации feBlend. Я пробовал feColorMatrix (диагональная матрица такая же, как и для множителя), и это сработало. Я не знаю, как он сравнивает производительность, но я делаю это только на небольшом изображении, который затем получает мозаику, поэтому я не думаю, что это имеет значение. – Saucerful