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

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

svg html radial-gradients vignette svg-filters
person Edmond Tamas    schedule 21.08.2018    source источник
comment
feFlood принимает цвет, но не paint, который вы пытаетесь передать.   -  person Robert Longson    schedule 21.08.2018
comment
@RobertLongson спасибо. Интересно, почему в этом репозитории все примеры фильтров используют его так: github.com/skrypte/fegram - Я просматривал документы, чтобы понять это, но, конечно, ничего подобного нет. Есть ли другой способ включить градиент в эффект фильтра?   -  person Edmond Tamas    schedule 21.08.2018
comment
Нарисуйте градиент на фигуре с помощью заливки и примените фильтр к фигуре.   -  person Robert Longson    schedule 21.08.2018
comment
извините, для меня это не имеет особого смысла: codepen.io/vedtam/ ручка/XPWYvy?editors=1000#0   -  person Edmond Tamas    schedule 21.08.2018
comment
BackgroundImage имеет плохую поддержку в браузерах, я думаю, что только Edge делает это хорошо.   -  person Robert Longson    schedule 21.08.2018
comment
Многие из фильтров в этом репозитории искажены способами, отличными от синтаксиса градиента (сломанные ссылки на примитивы, атрибуты за пределами границ, использование режима смешивания в качестве атрибута SVG и т. д.). Очень немногие, если таковые имеются, будут работать должным образом.   -  person Michael Mullany    schedule 22.08.2018
comment
@MichaelMullany спасибо, что заглянули. Было действительно странно видеть, что такой синтаксис применяется к такому объему работы, я просматривал документы и искал доказательства (одновременно изучая). Я собираюсь раскошелиться и исправить эти фильтры, чтобы у других не было такого же опыта.   -  person Edmond Tamas    schedule 22.08.2018
comment
Здравствуйте, я также хотел бы использовать фильтры из Instagram в качестве фильтров SVG. Кто-нибудь знает о текущей библиотеке, которая использует фильтры Instagram только как фильтры SVG? В настоящее время я нашел только следующее: fegram -› искаженный синтаксис svg) и CSSgram -› выглядит красиво, но только css. Кто-нибудь когда-нибудь разветвлял fegram и исправлял искаженный svg?   -  person BuZZ-dEE    schedule 29.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

No.

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

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

Это работает в браузерах на основе 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>' /
person BuZZ-dEE    schedule 01.04.2020