如何使用CSS在SVG元素上的中心位置跨浏览器实现缩放 [英] How to get scale works cross-browser in center position on SVG elements with CSS

问题描述

我有一些SVG元素，应该在悬停时缩放（请参阅下面的代码段）。它在WebKit浏览器上运行良好（将 transform-origin：50％50％; 添加到 g 元素即可完成此工作） 。但是Firefox似乎以自己的方式进行扩展（例如需要获得额外的 translate（x，y），而Edge根本没有扩展它。您有何建议？我是做错了还是应该为不同的浏览器引擎使用单独的样式？我想用CSS来解决它，但这只是一个例子，还有更多的g元素可以按不同的x和y位置缩放。

I have some SVG elements, which should be scaled on hover (see the attached code snippet below please). It works well on WebKit browsers (adding transform-origin: 50% 50%; to g element did the job). But Firefox seems to scale it in own way (like need to get some extra translate(x,y) and Edge doesn't scale it at all. What are your suggestions? Am I doing it wrong or should use a separate styling for different browser engines? I would like to solve it with CSS however, this is just an example. There are more g elements to be scaled with different x and y positions.

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
}

g:hover {
    transform: scale(1.5);
}

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

推荐答案

您已经假定转换框是填充框，默认情况下它不是视图框。我已经调整了盒子模型，使其符合您的期望。

You've assumed the transform-box is the fill-box, it's not by default it's the view-box. I've adjusted the box model to match your expectations below.

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

g:hover {
    transform: scale(1.5);
}

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

g {
    transition: all 0.5s;
    cursor: pointer;
    transform-origin: 50% 50%;
}

g:hover {
    transform: scale(1.5);
}

<svg height="260px" width="1106px" viewBox="0 0 1106 260">
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="20" y="78.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="25" y="88.5">REC</text></g>
  <g><rect fill="#ffffff" height="13" rx="2" ry="2" stroke="#b3b3b3" stroke-width="1" width="30" x="32.5" y="128.5"></rect><text fill="#999999" font-family="Verdana" font-size="9" x="37.5" y="138.5">REC</text></g>
</svg>

这篇关于如何使用CSS在SVG元素上的中心位置跨浏览器实现缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！