Несколько фильтров для одного объекта в SVG

Я хочу поставить два фильтра на свой круг. (Может больше)

Я пытался сделать:

filter="url(#f1);url(#f2)"

А также:

filter="url(#f1,#f2)"

А также:

filter="url(#f1 #f2)"

Но ни один из них не работает. Как я могу подойти к этой проблеме?


svg svg-filters
person Maurice Tempelsman    schedule 15.01.2013    source источник

Ответы (3)


arrow_upward
17
arrow_downward

Вы можете добавить несколько эффектов в один фильтр, однако, если вы хотите объединить фильтры, сначала сгруппируйте объект, а затем примените другой фильтр к вашему объекту.

<g filter="url(#f2)">
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"/>
</g>
person Badger Cat    schedule 15.01.2013
comment
Неа. Это еще хуже, чем раньше. Это просто избавляет меня от всех моих фильтров внутри группы. - person Maurice Tempelsman; 15.01.2013
comment
@BadgerGirl: Интересно, что этот пример не работает в Opera. Моя интуиция подсказывала бы полную противоположность (типа если где и работает, то в Опере). - person Thomas W; 15.01.2013
comment
Странно, может быть кто-нибудь предложит лучшее решение. - person Badger Cat; 15.01.2013
comment
Да неужели? Это странно, потому что этот пример работает у меня в Opera. - person Maurice Tempelsman; 15.01.2013
comment
@BadgerGirl: Хорошо, спасибо за скрипку :) Да, вы правы, это работает, но только в одну сторону. Видите ли, я хочу, чтобы f1 была в группе, а f2 — в ‹rect›, но это не работает наоборот :/ - person Maurice Tempelsman; 15.01.2013
comment
Хорошо, вы ответили на мой вопрос. Спасибо за вашу помощь :) Однако мне было бы полезно, если бы вы могли сказать мне, почему это работает только определенным образом. Спасибо еще раз :) - person Maurice Tempelsman; 15.01.2013

arrow_upward
6
arrow_downward

Начните с идентификатора feColorMatrix и назовите результат, например, currentGraphic. Используйте это как «вход» для каждого набора элементов фильтра / начала транзакции и как «результат» для окончательной операции пакета. Следующий пакет элементов выбирает его по адресу 'in'='currentGraphic' и т. д.

person Robert G    schedule 29.04.2013
comment
Можете сделать пример? - person dotnetCarpenter; 07.06.2015

arrow_upward
0
arrow_downward

Я знаю, что это очень старый вопрос, но для людей, ссылающихся на это, вы также можете просто разделить свои функции фильтра пробелами - filter="url(#f1) url(#f2)" должно работать

См.: https://css-tricks.com/almanac/properties/f/filter/

person karly    schedule 18.09.2020
comment
Я не знаю, почему за это проголосовали, но в настоящее время это жизнеспособное решение (проверено в Firefox и Chrome), при условии, что ввод f2 равен SourceGraphic - person verism; 23.07.2021