html – 悬停时的Svg路径动画

概述我想在悬停时使用我的svg上的转换属性比例.但是当悬停时,svg路径会发生变化,动画会发生在其他地方,而不是它所遵循的原始路径. html { background-color: #28505D; } svg { width: 50%; float: left; } #plane:hover { transform: scale(1.2, 1.2); } .pl 我想在悬停时使用我的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"  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,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5c0,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>

解决方法 这是导致问题的#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"  d="M-226 626c439,179" />  <g ID="plane" transform="translate(0,0)">    <path ID="note" fill="F23B3B" transform="translate(-248,-306)" d="M248.8,306.8z" />  </g>  <animateMotion xlink:href="#plane" dur="25s" repeatCount="indefinite" rotate="auto">    <mpath xlink:href="#planePath" />  </animateMotion></svg>

总结

以上是内存溢出为你收集整理的html – 悬停时的Svg路径动画全部内容，希望文章能够帮你解决html – 悬停时的Svg路径动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。