Поддерживает ли свойство 'flood-color' SVG-фильтра feFlood градиент в качестве входных данных?

Я экспериментирую с фильтрами 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>

feFlood принимает цвет, он не принимает краска, который вы пытаетесь передать.

Robert Longson 21.08.2018 09:36

@RobertLongson, спасибо. Интересно, почему в этом репозитории все примеры фильтров используют это так: github.com/skrypte/fegram - Я просматривал документы, чтобы понять это, но, конечно, ничего подобного нет. Есть ли другой способ включить градиент в эффект фильтра?

Edmond Tamas 21.08.2018 09:55

Нарисуйте градиент на форме с помощью заливки и примените фильтр к форме.

Robert Longson 21.08.2018 09:58

извините, для меня это не имеет особого смысла: codepen.io/vedtam/pen/XPWYvy?editors=1000#0

Edmond Tamas 21.08.2018 10:04

BackgroundImage имеет плохую поддержку в браузерах, я думаю, только Edge справляется с этим хорошо.

Robert Longson 21.08.2018 10:06

Многие фильтры в этом репо искажены способами, отличными от синтаксиса градиента (нарушенные ссылки на примитивы, атрибуты вне границ, использование режима смешивания в качестве атрибута SVG и т. д.). Очень немногие, если таковые имеются, будут работать должным образом.

Michael Mullany 22.08.2018 05:34

@MichaelMullany, спасибо, что посмотрели. Было действительно запутанно видеть, что такой синтаксис применяется к такому объему работы, я просматривал документы и искал доказательства (одновременно обучаясь). Я собираюсь разветвляться и исправлять эти фильтры, чтобы у других не было такого же опыта.

Edmond Tamas 22.08.2018 06:44

Здравствуйте, я также хотел бы использовать фильтры из Instagram в качестве SVG-фильтров. Кто-нибудь знает о текущей библиотеке, которая использует фильтры Instagram только как фильтры SVG? В настоящее время я нашел только следующее: Fegram -> искаженный синтаксис svg) и CSSgram -> выглядит хорошо, но только css. Кто-нибудь когда-нибудь форкнул fegram и поправил уродливый svg?

BuZZ-dEE 29.01.2020 14:37
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
8
686
1

Ответы 1

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>' /

Другие вопросы по теме