我想在鼠标悬停时使用transform属性对我的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>