我有以下的.svg图形：
我试图使电子动画,使其沿着曲线的曲率移动(与页面成比例地滚动)直到某一点(可能是同一点,如果电子被翻转在虚构的x上这个图像的轴)：
我对网络开发相当新颖,所以我不确定我会如何完成这个.我想像我将使用CSS3来实际的动画,而jQuery来捕捉滚动事件;但我真的不知道我会在哪里开始的线索.
优化的.svg代码供参考：
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="436.25" height="456.5" version="1.1">
<style>
.s0 {
fill:#1c1f26;
}
</style>
<g transform="translate(-225.94052,-31.584209)">
<path d="m259.84 71.78c-120.47 0-218.12 102.2-218.12 228.25 0 126.05 97.65 228.25 218.13 228.25 120.47 0 218.13-102.2 218.13-228.25 0-126.05-97.65-228.25-218.12-228.25zm0 4.78c117.95 0 213.56 100.05 213.56 223.47C473.41 423.45 377.8 523.5 259.84 523.5 141.89 523.5 46.25 423.45 46.25 300.03 46.25 176.61 141.89 76.56 259.84 76.56z" transform="translate(184.22177,-40.197041)" fill="#1c1f26" />
</g>
<g transform="translate(-81.915798,-31.584205)">
<g transform="matrix(-0.25881905,-0.96592583,0.96592583,-0.25881905,129.87282,611.33082)" fill="#1c1f26">
<path transform="matrix(1.0061861,-0.5809218,0.5809218,1.0061861,-135.78147,130.45415)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07zM279.91 300.03 279.91 300.03" fill="#1c1f26" />
<path d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" transform="matrix(1.0061861,-110.83616,87.416816)" fill="#1c1f26" />
<path transform="matrix(1.0061861,-160.5781,87.330591)" d="m279.91 300.03c0 11.09-8.99 20.07-20.07 20.07-11.09 0-20.07-8.99-20.07-20.07 0-11.09 8.99-20.07 20.07-20.07 11.09 0 20.07 8.99 20.07 20.07z" fill="#1c1f26" />
</g>
<path class="electron" d="m107.76 150.64c0 6.53-5.3 11.83-11.83 11.83-6.53 0-11.83-5.3-11.83-11.83 0-6.53 5.3-11.83 11.83-11.83 6.53 0 11.83 5.3 11.83 11.83z" transform="translate(120.35903,-99.340798)" fill="#1c1f26" />
</g>
</svg>
我在class =“electron”的代码中标注了电子.有什么建议么？
解决方法
您的SVG代码可以进行一些优化,因为它完全由圆形图元组成：
<svg width="80" height="80" style="position:fixed; top:5px; left:5px;">
<g transform="translate(40,40)">
<g id="a1" transform="rotate(40)">
<circle cx="0" cy="5" r="4" fill="#1c1f26" />
<circle cx="4.33" cy="-2.5" r="4" fill="#1c1f26" />
<circle cx="-4.33" cy="-2.5" r="4" fill="#1c1f26" />
</g>
<circle cx="0" cy="0" r="37" fill="none" stroke="#1c1f26" stroke-width="1" />
<g id="a2" transform="rotate(160)">
<circle cx="0" cy="37" r="3" fill="#1c1f26" />
</g>
</g>
</svg>
电子旋转可以很容易地通过挂入window.onscroll事件来实现：
$(window).scroll(function(){
var s = ($(window).scrollTop() / ($(document).height() - $(window).height()));
var r1 = 40+106*s,r2=160-320*s;
$("#a1").attr("transform","rotate("+r1+")");
$("#a2").attr("transform","rotate("+r2+")");
});
这个例子也旋转原子核;如果不需要,您可以删除.
You can see it working here.
怎么运行的：
< svg>元素的尺寸为80×80像素,顶层< g>元素将绘图坐标的原点水平和垂直移动到图像中间40像素.所以当我们改变两个< g>它内部的元素,我们可以确定它们将围绕图像的中心旋转.
电子只是在y方向上垂直偏移37像素的平原圆(恰好朝向屏幕底部),而g#a2元素给出了160°的初始(顺时针)旋转,因此它只出现左边的轨道顶部.
在窗口的滚动处理程序事件中,s被设置为从0(上)到1(下)的值的当前滚动位置,该值用于将电子的旋转角度从160°改变为-160°(或评论中讨论的修改版本为160°至20°.