viewBox , width , height are defined in the viewBox tag. When the ratio of viewBox to physical size is 1: 1, everything is fine.
when the ratio is not 1:1 , scale using css3 appears as shown in the figure
how to set up the trigger animation without the deviation of position and size?
found problems on viewBox and transform . The solution to the
solution is to avoid using transform and replace the representation in other ways, such as margin+width+height for scale .
@keyframes rubberband {
from { margin:0; width:100%; height:100%; }
30% { margin:12.5% 0 0 -12.5%; width:125%; height:75%; }
40% { margin:-12.5% 0 0 12.5%; width:75%; height: 125%; }
50% { margin:7.5% 0 0 -7.5%; width:115%; height:85%; }
65% { margin:-2.5% 0 0 2.5%; width:95%; height:105%; }
75% { margin:2.5% 0 0 -2.5%; width:105%; height:95%; }
to { margin:0; width:100%; height:100%; }
}