CODEWITHSUNDEEP
htmlcssfirefoxsvgcss-transforms
felixthehat
felixthehat

Reputation: 847

CSS transform-origin from center on SVG ignored in Firefox

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

Upvotes: 4

Views: 4304

Answers (1)

helderdarocha
helderdarocha

Reputation: 23627

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

Upvotes: 1

Related Questions