html - 悬停时的 Svg 路径动画

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>