Javascript 德国式铁路时钟。SVG的惊人使用？

别笑，我对SVG的了解几乎为零。这是我第一次尝试设置svg阴影的动画。我只想动态访问filter feOffset的dx和dy属性，以便在时钟指针在刻度盘上移动时提供真实的阴影位置。 我唯一能做的就是拆开svg并用JavaScript重新组装它。在我的机器上，它以大约1.5%到4%的cpu运行，设置超时周期大约为30mls（需要平滑的秒针）。我放弃了requestanimationframe，因为时间长而没有页面焦点。 目前，脚本正在每个新周期中创建/替换（我想！）新的svg。 无论如何，我的问题是，有没有更好/正确的方法来访问和操作dx和dy？ Ps：我之所以使用svg，是因为我想要的形状显然不能用css生成，而且因为时钟完全可以调整大小，所以不能使用图像png等。 谢谢你的帮助

（函数（）{
/*德国站式钟*/
/*^^^^^^^^^^^^^^^^^^^^^^^^^下面的配置*/
var clockSize=500；
var casecol='rgba（40,40,40,1.0）'；
var dialcol='rgba（255255,1.0）'；
var numcol='rgba（40,40,40,1.0）'；
var seccol='rgba（200,0,0,1.0）'；
var handcol='rgba（40,40,40,1.0）'；
var阴影不透明度=0.3；
var shadowBlur=0.2；
var阴影角=0.6；
var-clockShape=50；
/*（最大）50=圆形（最小）0=方形*/
var numoutline=‘否’；
/*“是”或“否”*/
var numfill='rgba（255,0,0,1.0）'；
var numshad='rgba（0,0,0,0.1）'；
/*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^结束配置*/
var d=文件；
var-dgts=[]；
var e=360/12；
var-degr=0；
变量nums=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'10'，'11'，'12']；
var-tmr；
var mls=1000/30；
var radi=Math.PI/180；
var offs=60*radi；
var canstroke=（'webkitTextStroke'在d.body.style中）；
var str='-webkit文本填充颜色：'+numfill+'；'
+'-webkit文本笔划宽度：'+xy（0.4）+'px；'
+'-webkit文本笔划颜色：'+numcol+'；'；
var wks=（canstroke&&numoutline=“yes”）？str:“”；
var broff=（钟型<20）？2:0；
var-presec；
var-premin；
var prehou；
var rnd='id'+Math.random（）*1；
var idx=d.getElementsByTagName（'div'）。长度；
d、 写（“”）；
函数xy（a）{
返回（a*时钟大小/100）；
}
/*时钟刻度盘*/
var dial=d.createElement（'div'）；
dial.setAttribute（'style'，'display:inline block；'
+'位置：相对；'
+'高度：'+clockSize+'px；'
+'宽度：'+clockSize+'px；'
+'背景色：'+dialcol+'；'
+'边框：'+xy（2）+'px实心'+casecol+'；'
+'边界半径：'+clockShape+'%；'）；
d、 getElementById（rnd）.appendChild（拨号）；
/*时钟标记*/
对于（变量i=0；i<12；i++）{
dgts[i]=d.createElement（'div'）；
dgts[i].setAttribute（'style'，'display:block；'
+'位置：绝对；'
+'宽度：'+xy（16）+'px；'
+'高度：'+xy（14）+'px；'
+'页边距：自动；顶部：0；底部：0；左侧：0；右侧：0；'
+'字体：粗体'+xy（13）+'px Arial；'
+'线高度：'+xy（13）+'px；'
+'文本对齐：居中！重要；'
+“颜色：”+numcol+”；“+wks+”；”）；
dgts[i].innerHTML=nums[i]；
电话号码：儿童（dgts[i]）；
degr+=30；
dgts[i].style.top=xy（0）+xy（84）*Math.sin（-offs+e*i*radi）+“px”；
dgts[i].style.left=xy（0）+xy（84）*Math.cos（-offs+e*i*radi）+“px”；
dgts[i].style.transform='rotate（+'degr）+'deg'；
dgts[i].style.transformOrigin='center'；
}
/*通用集装箱部门，适用于所有人员*/
var handContainers='display:block；'
+'位置：绝对；'
+'高度：'+xy（100）+'px；'
+'宽度：'+xy（20）+'px；'
+'字体大小：0px；行高：0px；填充：0；'
+'页边距：自动；顶部：0；底部：0；左侧：0；右侧：0；'
+'变换原点：中心；'
/*时针*/
var houHand=d.createElement（'div'）；
setAttribute（'style'，handContainers+'转换：.5s立方贝塞尔（0.666,1.91,0.333,0）；'）；
拨号。追加儿童（houHand）；
var houC=d.createElement（'div'）；
var housvg=''；
/*分针*/
var minHand=d.createElement（'div'）；
setAttribute（'style'，handContainers+'转换：.4s立方贝塞尔（0.666,1.91,0.333,0）；'）；
拨号。附属器（minHand）；
var minC=d.createElement（'div'）；
var minsvg=''；
/*秒针*/
var secHand=d.createElement（'div'）；
setAttribute（'style'，handContainers）；
拨号。附属器（secHand）；
var secC=d.createElement（'div'）；
var secsvg=''+
''+
'';
函数dropShadow（s，h）{
var深度=xy（h）；
可变角度=s*半径-阴影角度；
var vsa=深度*数学cos（角度）；
var hsa=深度*数学sin（角度）；
返回{vsa:vsa，hsa:hsa}
}
var-str1=''；
var str3=''；
var str5=''+
''+
''+
''+
''+
''+
''+
'';
var-str8=''；
函数dynShad（str2，str4，str6，str7）{
var create=str1+str2+str3+str4+str5+str6+str7+str8；
返回创建；
}
功能时钟（）{
var x=新日期（）；
var time=Math.min（60000,1.025*（1000*x.getSeconds（）+x.getmillizes（））；
var秒=数学下限（时间/1000）；
var millis=时间%1000；
var germanSec=（6*秒+3*（1+Math.cos（Math.PI+Math.PI*（0.001*毫秒））；
var minutes=x.getMinutes（）；
变量小时=（x.getHours（）*30）+（分钟/2）；
如果（germanSec！==presec）{
var ssy=dropShadow（germanSec，0.7）.vsa；
var ssx=dropShadow（germanSec，0.7）.hsa；
var sf=“”；
var-se=''；
var offset = document.getElementById('hoffset'+idx);

offset.setAttribute("dx", "13");

offset.dx.baseVal = 13;