我的 html 中有一个内联的 svg 图标,悬停时应用 css 比例转换。我已将 transform-origin 属性设置为 center/50% on the path's parent group* 并且它在 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);
}
关于html - 在 Firefox 中忽略来自 SVG 中心的 CSS transform-origin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22361088/