search

rexxars / react-hexagon

React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers and more.
http://rexxars.github.io/react-hexagon/
MIT License
69 stars 21 forks source link

Transition gradients on hover #3

Closed NeXTs closed 7 years ago

NeXTs commented 7 years ago

Hey Espen,

I'm looking for a way to change fill and stroke gradients on hover smoothly The only possible way to do it inside single SVG tag is by using [this trick with mask].(http://stackoverflow.com/a/26677024/1221082)

How do you think, it could be integrated into react-hexagon?

NeXTs commented 7 years ago

Hm, I just realised that I can use second approach with changing stop-color's by css in combination with syntax you proposed here but I'll have to add unique gradient's defs to every hexagon instance on the page. And I have a lot of them :\

That's possible but probably not the best option. Using trick with mask people will be able to animate even background images on hover.

Anyway, I understand that you may don't have free time for this. Then just write few words to this thread so I know your thoughts.

NeXTs commented 7 years ago

Okay finally I realised that either I have a lot of hexagons on the page, luckily only few of them should be interactive.

In addition to that second option has it's own advantages, it's more flexible in terms of css states: I am able to add styles to hover, state, active state, etc..

So I'll use second option and leave these thoughts for the history, maybe it will save some time to someone :)