I have an svg icon built into my html that when applied, it uses a scaled css conversion. I set the transform-origin property to center / 50% in the parent group of the path *, and it works fine in Webkit but is ignored in Firefox. Any ideas?
Here is 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 requiring groups - just using this single path for clarity
source
share