悬停的Svg路径动画
[英]Svg path animation on hover
问题描述
I want to use transform property scale on my svg on hover. 
我想在悬停时使用我的svg上的转换属性比例。 But when on hover the svg path changes and the animation takes place somewhere else instead of the original path it followed. 但是当悬停时，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>
1 个解决方案
解决方案1
3 已采纳 2016-01-16 18:32:48
It's the translate on your #plane element that is causing the problem. 这是导致问题的#plane元素的翻译。 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. 您可以将其应用于笔记，而不是将变换应用于#plane元素。 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. 看到片段，我把比例放到2，因为当它不移动时很难看到1.2。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.