html – 在Firefox中忽略了SVG中心的CSS转换源

我的html内嵌了一个svg图标,当悬停时,应用css scale变换.我已经将transform-origin属性设置为路径的父组*的中心/ 50%,它在Webkit中运行良好但在Firefox中被忽略.有任何想法吗?

这是一个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(忽略供应商前缀):

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

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

*我有其他图标包含几个路径,需要一个组 – 为了清楚起见,只使用这个单一路径示例

解决方法

我设法使用translate来补偿由缩放引起的翻译:

.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

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些