How to set custom fill for logo on hover

Discuss SVG code, accessible via the XML Editor.
SVGIsBetterThanAI
Posts: 7
Joined: Sun Sep 11, 2016 9:52 am

How to set custom fill for logo on hover

Postby SVGIsBetterThanAI » Sun Sep 11, 2016 10:24 am

So I'd like to finally take the plunge and use an SVG logo I made in Inkscape for my website. I want to give it a transition when you hover over it and have the fill change colors too. I was wondering how I could achieve this via my xml file. I searched on google, but couldn't find a quality answer, so I figured I'd ask the experts on the Inkscape Forum. This seems like something that would be easy to do, but there isn't much help via other resources.

Moini
Posts: 2233
Joined: Mon Oct 05, 2015 10:44 am

Re: How to set custom fill for logo on hover

Postby Moini » Sun Sep 11, 2016 11:13 am

On the Inkscape website, we have a couple of SVG buttons that do this. They use an SVG with two images inside as a background image, and move the area that is displayed when you hover over them. E.g. the flag or the star icons on the gallery image pages (example: https://inkscape.org/en/~pestodesign/%E ... tasy-skull ). It's all CSS, no js, no image directly in the page html. Not sure if that's what you'd want, though, but it's one way to achieve this.
Something doesn't work? - Keeping an eye on the status bar can save you a lot of time!

Inkscape FAQ - Learning Resources - Website with tutorials (German and English)

SVGIsBetterThanAI
Posts: 7
Joined: Sun Sep 11, 2016 9:52 am

Re: How to set custom fill for logo on hover

Postby SVGIsBetterThanAI » Mon Sep 12, 2016 11:17 am

Hey Moini, thanks so much for the response. I believe what you are referring to is an image sprite. This usually works well, and is an excellent solution for most cases. I want to be able to apply css transitions so there is a delay on the hover fill

hulf2012
Posts: 715
Joined: Sat Nov 24, 2012 12:37 pm

Re: How to set custom fill for logo on hover

Postby hulf2012 » Mon Sep 12, 2016 4:11 pm

Hello
If by XML file You are refering to the SVG file, You can put an inline style sheet, like it's explained here:

http://tutorials.jenkov.com/svg/svg-and ... yle-sheets

Inside that style sheet, you can put the keyframes for animation, or the transition.

But please be aware that transitions or CSS animations works very bad or doesn't work at all in MS web browsers. In fact, they recommend using javascript for making SVG animations !!.

See this sample codepen I have, which works OK in Chrome and Firefox:
http://codepen.io/hulf2015/pen/yNWRwm
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

SVGIsBetterThanAI
Posts: 7
Joined: Sun Sep 11, 2016 9:52 am

Re: How to set custom fill for logo on hover

Postby SVGIsBetterThanAI » Tue Sep 13, 2016 4:02 am

hulf2012, wow this awesome! You hit the nail on the head on this one. I was looking for something like this. Thank you so much


Return to “SVG / XML Code”

Who is online

Users browsing this forum: No registered users and 2 guests