4

I have an svg icon inlined in my html that when hovered, applies a css scale transform. I've set the transform-origin property to center/50% on the path's parent group* and it works great in Webkit but ignored in Firefox. Any ideas?

Here is a jsFiddle

HTML/SVG:

<div class="col3 build websites-content">
    <svg class="svg-icon icon-build" width="75px" height="75px">
        <g><path fill="#fff" d="M17.5,39.7L28.8,42v13.5l9.5-8.5L49,55.5l4.5-36L17.5,39.7z M35.5,42L31,48.7V42l18-18L35.5,42z"/></g>
    </svg>
</div>

CSS (ignoring vendor prefixes):

.websites-content g {
    transition: transform 0.3s ease;
    transform-origin: center center;
}

.websites-content:hover g {
    transform: scale(1.3);
}

*I have other icons containing several paths, necessitating a group – just using this single path example for clarity

MikeSmithDev
  • 15,731
  • 4
  • 58
  • 89
felixthehat
  • 849
  • 2
  • 9
  • 24
  • 4
    I'm playing around with your Fiddle in FireFox and what's weird is that it doesn't like `center` or `50%` for the `transform-origin` value yet it's fine with a pixel value... – Fernker Mar 12 '14 at 19:29
  • 1
    These might be helpful: http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox http://stackoverflow.com/questions/18938331/transform-origin-for-css-animation-on-svg-working-in-chrome-not-ff/18943090#18943090 – Fernker Mar 12 '14 at 19:32
  • Yeah it is weird re. the pixel value. And thanks for those links, but they are hacky with extra markup. Thank you very much for looking! – felixthehat Mar 12 '14 at 19:55

1 Answers1

1

I managed to make it work on both using translate to compensate the translation caused by scaling:

.websites-content:hover g {
 -webkit-transform: scale(1.3) translate(-8.6px, -8.6px);
 -moz-transform:    scale(1.3) translate(-8.6px, -8.6px);
 -ms-transform:     scale(1.3) translate(-8.6px, -8.6px);
  transform:        scale(1.3) translate(-8.6px, -8.6px);
}

jsfiddle

zoranc
  • 2,410
  • 1
  • 21
  • 34
helderdarocha
  • 23,209
  • 4
  • 50
  • 65