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-ic 我的HTML内嵌了一个svg图标,当悬停时,应用CSS scale变换.我已经将transform-origin属性设置为路径的父组*的中心/ 50％,它在Webkit中运行良好但在firefox中被忽略.有任何想法吗？

这是一个jsFiddle

HTML / SVG：

<div >    <svg  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

总结

以上是内存溢出为你收集整理的html – 在Firefox中忽略了SVG中心的CSS转换源全部内容，希望文章能够帮你解决html – 在Firefox中忽略了SVG中心的CSS转换源所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。