Возможно ли анимировать непрозрачность фильтра SVG с помощью CSS-кода?

У меня есть изображение svg, которое работает как кнопка. Когда вы наводите курсор на кнопку, svg fill меняется на другой цвет, но я также хочу, чтобы внутренний фильтр тени, который я создал, также отображался. То есть, чтобы перейти от 0% непрозрачности до 100%.Возможно ли анимировать непрозрачность фильтра SVG с помощью CSS-кода?

Мне удалось изменить цвет заливки на css-переходы. Можно ли изменить непрозрачность фильтра с помощью css?

Вот код SVG:

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="36.25px" height="23px" viewBox="5 -5 36.25 23" enable-background="new 0 0 36.25 23" xml:space="preserve"> 

<!--Definiciones del Filtro--> 
<filter id="sombra" x="-50%" y="-50%" width="200%" height="200%"> 
<feComponentTransfer in="SourceAlpha"> 
<feFuncA type="table" tableValues="1 0" /> 
</feComponentTransfer> 
<feGaussianBlur stdDeviation="1"/> 
<feOffset dx="-1" dy="-1" result="offsetblur"/> 
<feFlood flood-color="rgb(20, 0, 0)" result="color"/> 
<feComposite in2="offsetblur" operator="in"/> 
<feComposite in2="SourceAlpha" operator="in" /> 
<feMerge> 
<feMergeNode in="SourceGraphic" /> 
<feMergeNode /> 
</feMerge> 
</filter> 

<g filter="url(#sombra)"> 
<polygon points="23.671,8.625 23.671,4.657 21.786,4.657 21.786,7.513 18.255,5.433 18.194,5.398 18.058,5.398 
4.724,13.249 5.502,14.57 7.862,13.179 7.862,18.343 9.396,18.343 9.396,12.276 18.128,7.138 26.854,12.276 26.854,18.343 
28.388,18.343 28.388,13.179 30.75,14.57 31.526,13.249 "/> 

<rect x="15.289" y="11.553" width="2.44" height="2.444"/> 
<rect x="18.523" y="11.553" width="2.438" height="2.444"/> 
<rect x="15.289" y="14.656" width="2.44" height="2.439"/> 
<rect x="18.523" y="14.656" width="2.438" height="2.439"/> 
</g> 
</svg>

Вот CSS:

#Capa_1{ 
fill:#FFFFFF; 
-webkit-transition: fill 0.3s; 
} 

#Capa_1:hover{ 
fill:#8A653B; 
}

Заранее спасибо! ...

источник

2015-02-17 Gabriel Leni

нравится это? [CODEPEN] (http://codepen.io/shadowman86/pen/azYNYb) – innovation

Нет, не совсем. Идея состоит в том, чтобы начать с белого изображения, а внутренняя тень невидима. Затем, когда вы наводите курсор на кнопку, цвет и фильтр должны стать видимыми. Благодаря! –

-1

ДаMDN doc имеет рабочий проект анимируемого фильтра.

ноnot a lot of support в настоящее время доступен :(

А на элементах SVG он работает только в Firefox

Вот скрипка для пользователей Fire Fox:. Fiddle

Применяя фильтр SVG : filter: url(#filterid)
Применение фильтра непрозрачности svg: filter: opacity(50%);
И комбинированный: filter: url(#filterid) opacity(50%);

источник

2015-02-18 00:27:09 Persijn

Действительно? Только для firefox? :/ это глупо. Скрипка выглядит точно так же, как я пытался, без каких-либо результатов в Chrome и IE. Разве нет обходного пути? Благодаря! –

О, я также заметил, что добавив в фильтр строку «непрозрачность», вы не изменяете непрозрачность фильтра, а наоборот добавляете и модифицируете фильтр непрозрачности. –

yh, вероятно, вам придется включить непрозрачность в пользовательский фильтр (если это возможно): Но даже фильтры на svg довольно экспериментальны, поэтому вы немного опережаете время, делая это в веб-браузерах. – Persijn

После нескольких часов поиска кто-то уже ответил на этот вопрос.

Вот обходной путь: Using CSS, is there a way to change the opacity of an SVG's <filter> element?

Он работает вокруг довольно хорошо на текущих версиях Firefox и Chrome. Однако анимация SVG не очень хорошо работает в IE, но непрозрачность фильтра изменилась.

Спасибо!

источник

2015-02-19 00:53:46

Возможно ли анимировать непрозрачность фильтра SVG с помощью CSS-кода?

ответ

Смежные вопросы