Svg path animation on hover - html

Question

I want to use transform property scale on my svg on hover. But when on hover the svg path changes and the animation takes place somewhere else instead of the original path it followed.
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>

Answer 1

It's the translate on your #plane element that is causing the problem. When you scale, the translate is taken into account in the calculations, since you need to scale from a certain point.
Instead of applying transform to your #plane element, you can apply it to the note. So when you add scale on hover you don't have to worry about then translate part. See snippet, I've put the scale to 2, cause it's hard to see 1.2 when it's not moving. But you can set whatever you want, it'll scale without moving.
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>