Поддерживает ли свойство 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>
Источник

0 ответов

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

Нет.

Я раздвоенный от развилки этого хранилища и попытался исправить эти фильтры. Пожалуйста, посмотрите.

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

Это работает для браузеров на основе Chromium, но не работает в Firefox из-за этой ошибки: "Фильтры SVGfeImage с xlink:hrefне работает с фрагментами ".

В качестве обходного пути для Firefox вы можете попробовать использовать его вот так:

<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' /
Источник
Другие вопросы по тегам