There is no SVG file, it is strictly a PNG, I created manually in
Photoshop.
Photoshop sprite tools are weak I'm going to consider making a Photoshop
plugin for this in the future.
Philippe Wittenbergh wrote:
On Apr 5, 2016, at 04:22, Crest
Christopher<crestchristop...@gmail.com> wrote:
The hover works, but the sprite doesn't animate upon hover ?
a {
height:23px
margin-top: -21px
display:block;
}
a:hover {
background-position:0 -1225px // The sprite actual width
background:url ('spriteimage.png')
If I apply the width of the sprite to the anchor, the element gets
re-positioned, as the CSS-Tricks site mentions to do but in my case
as I said, it gets re-positioned and I don't want that.
If I understand correctly: 1/ you have an animation defined **inside**
the SVG file and 2/ that SVG file is loaded as a background-image. The
you want to have that animation play when your pointer hovers over the
image.
I don’t think that ought to work. Animations defined inside the SVG
will only work if the SVG image is embedded directly inside the HTML.
Like this:
<a href="/foo"><svg>………</svg></a>
Sara Soueidan has some examples of animations on hover (scroll down):
https://sarasoueidan.com/tools/circulus/
There is lots of useful info about SVG on her site.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
