<g> element inside of a .svg doesn't scale up on :hover (css)

Question

I'm new to coding and have some issues I'm unable to resolve and hope you can help me. The thing is: I've exported a svg-file out of Visio drawing and now I'm trying to scale an element inside this svg. I've used the transform: scale(2) !important command on hover inside the css but the element (#shape72-136 - which is the top left rectangle) is kind of vibrating instead of scaling up. Also it doesn't change to desired color.

Hope you can help me out.

.st1 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75}
    .st2 {fill:#00b050;font-family:Calibri;font-size:1.00001em}
    .st3 {fill:#ffffff;stroke:#00b050;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
    .st4 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}

#shape72-136:hover {fill:blue !important; width: 400px; height: 100px; transform: scale(2) !important; animation-name: example; animation-duration: 4s; animation-iteration-count: infinite;}
@keyframes example {
0% {
filter: brightness(1);
filter: contrast(1);

}
50% {
filter: brightness(2);
filter: contrast(0.1);

}
100% {
filter: brightness(1);
filter: contrast(1);

 }
}

You can fiddle the code: https://jsfiddle.net/pickle/kcuntLLz/

Answer 1

Here's one way, move the static transform onto the rect element and then specify transform-origin and transform-box to ensure that the scaling works from the rect centre.

 .st1 {fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.75} .st2 {fill:#00b050;font-family:Calibri;font-size:1.00001em} .st3 {fill:#ffffff;stroke:#00b050;stroke-linecap:round;stroke-linejoin:round;stroke-width:1} .st4 {fill:none; fill-rule:evenodd; font-size:12px; overflow:visible; stroke-linecap:square; stroke-miterlimit:3} #shape73-138:hover { fill: blue !important; transform: scale(1.5); /*animation-name: example;*/ animation-duration: 4s; animation-iteration-count: infinite; } #shape73-138 { transform-origin: center center; transform-box: fill-box; } @keyframes example { 0% { filter: brightness(1); filter: contrast(1); } 50% { filter: brightness(2); filter: contrast(0.1); } 100% { filter: brightness(1); filter: contrast(1); } }

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="9.90261in" height="2.57908in" viewBox="0 0 712.988 185.694" xml:space="preserve" color-interpolation-filters="sRGB" class="st4"> <g> <g id="shape73-138"> <title>Rechteck.69</title> <rect transform="translate(48.5326,-103.539)" x="0" y="143.174" width="20.1861" height="42.5197" class="st3"/> </g> </g> </svg>