How to get scale works cross-browser in center position on SVG elements with CSS

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/49006947/how-to-get-scale-works-cross-browser-in-center-position-on-svg-elements-with-css

标签

css

svg

cross-browser

scale

css-transforms