Svg hover animation

Question

I want to use the conversion properties scale on my svg on hover. But when you hover the path, svg changes, and the animation happens somewhere else instead of the original path.

 html {
   background-color: #28505D;
 }
 svg {
   width: 50%;
   float: left;
 }
 #plane:hover {
   transform: scale(1.2, 1.2);
 }
 .planePath {
   stroke: #D9DADA;
   stroke-width: .1%;
   stroke-width: .5%;
   stroke-dasharray: 1% 2%;
   stroke-linecap: round;
   fill: none;
 }
 .fil1 {
   fill: #D9DADA;
 }
 .fil2 {
   fill: #C5C6C6;
 }
 .fil4 {
   fill: #9D9E9E;
 }
 .fil3 {
   fill: #AEAFB0;
 }

<svg viewBox="0 0 3387 1270">
  <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
  <g id="plane" transform="translate(-248,-306)">
    <path id="note" fill="F23B3B" transform="translate(0,0)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
  </g>

  <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
  </animateMotion>
</svg>

Run codeHide result

Answer 1

#plane , . , , . #plane . , , , . . , 2, 1.2, . , , , .

html {
   background-color: #28505D;
 }
 svg {
   width: 50%;
   float: left;
 }
 #plane:hover {
   transform: scale(2, 2) ;
 }
 .planePath {
   stroke: #D9DADA;
   stroke-width: .1%;
   stroke-width: .5%;
   stroke-dasharray: 1% 2%;
   stroke-linecap: round;
   fill: none;
 }
 .fil1 {
   fill: #D9DADA;
 }
 .fil2 {
   fill: #C5C6C6;
 }
 .fil4 {
   fill: #9D9E9E;
 }
 .fil3 {
   fill: #AEAFB0;
 }

<svg viewBox="0 0 3387 1270">
  <path id="planePath" class="planePath" d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179" />
  <g id="plane" transform="translate(0,0)">
    <path id="note" fill="F23B3B" transform="translate(-248,-306)" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z" />
  </g>

  <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">
    <mpath xlink:href="#planePath" />
  </animateMotion>
</svg>

Hide result