Svg path animation on hover

Question

Я хочу использовать масштаб свойств преобразования на моем svg при наведении. Но когда при наведении изменен путь svg, а анимация происходит где-то в другом месте вместо исходного пути, который он соблюдает.

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

Это перевод на вашем #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>