Я экспериментирую с фильтрами SVG, пытаясь создать эффект виньетки.
Я нашел фрагмент в старом репо, где автор сделал это так, но feFlood
не подбирает фильтр за меня. Я тоже пробовал flood-color = "url(#gradient_toaster)"
, но без разницы. В документах W3 говорится, что это свойство принимает цвет, в чем автор может ошибаться? Если да, то как можно добиться эффекта виньетки?
<html>
<svg width = "300" height = "300" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink">
<defs>
<radialGradient id = "gradient_toaster">
<stop offset = "100%" stop-color = "#804e0f" stop-opacity = "100%" />
<stop offset = "0%" stop-color = "#3b003b" stop-opacity = "100%" />
</radialGradient>
<filter id = "toaster">
<feFlood flood-color = "#gradient_toaster" flood-opacity = "0.5" />
<feBlend mode = "screen" in = "SourceGraphic" />
</filter>
</defs>
<rect x = "0" y = "0" width = "300" height = "300" filter = "url(#toaster)" fill = "gray"/>
</svg>
</html>
@RobertLongson, спасибо. Интересно, почему в этом репозитории все примеры фильтров используют это так: github.com/skrypte/fegram - Я просматривал документы, чтобы понять это, но, конечно, ничего подобного нет. Есть ли другой способ включить градиент в эффект фильтра?
Нарисуйте градиент на форме с помощью заливки и примените фильтр к форме.
извините, для меня это не имеет особого смысла: codepen.io/vedtam/pen/XPWYvy?editors=1000#0
BackgroundImage имеет плохую поддержку в браузерах, я думаю, только Edge справляется с этим хорошо.
Многие фильтры в этом репо искажены способами, отличными от синтаксиса градиента (нарушенные ссылки на примитивы, атрибуты вне границ, использование режима смешивания в качестве атрибута SVG и т. д.). Очень немногие, если таковые имеются, будут работать должным образом.
@MichaelMullany, спасибо, что посмотрели. Было действительно запутанно видеть, что такой синтаксис применяется к такому объему работы, я просматривал документы и искал доказательства (одновременно обучаясь). Я собираюсь разветвляться и исправлять эти фильтры, чтобы у других не было такого же опыта.
Здравствуйте, я также хотел бы использовать фильтры из Instagram в качестве SVG-фильтров. Кто-нибудь знает о текущей библиотеке, которая использует фильтры Instagram только как фильтры SVG? В настоящее время я нашел только следующее: Fegram -> искаженный синтаксис svg) и CSSgram -> выглядит хорошо, но только css. Кто-нибудь когда-нибудь форкнул fegram и поправил уродливый svg?
Does the SVG filter feFlood 'flood-color' property support gradient as input?
Нет.
Я раздвоенный из форка этого репозитория и попытался исправить эти фильтры. Пожалуйста, посмотрите.
Draw a gradient on a shape via fill and apply a filter to the shape too.
Это работает для браузеров на основе Chromium, но не работает в Firefox из-за этой ошибки: «SVG фильтрует feImage
с xlink:href
, не работает с фрагментами».
В качестве обходной путь для Firefox вы можете попробовать использовать его так:
<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width = "100" height = "100"><rect width = "50" height = "50 /></svg>' /
feFlood принимает цвет, он не принимает краска, который вы пытаетесь передать.