我的html内嵌了一个svg图标,当悬停时,应用css scale变换.我已经将transform-origin属性设置为路径的父组*的中心/ 50%,它在Webkit中运行良好但在Firefox中被忽略.有任何想法吗?
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); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。