Javascript 使用SVG和ajax为IO硬件的状态设置动画

我工作的那家公司正在销售能够管理和监控不同IO设备的微型计算机。 他们在web IO中使用ajax，我为电压表创建了一个新的图形，它包含41种状态，从0伏到20伏，步进为0.5。 我的第一个问题是，如果因为图像太多而被称为精灵

我写的加载图片的代码已经比该公司的代码要短得多，因为我做了一个通过计数器生成img链接的函数

var i = 1;

function counter()
{
var img = "http://"adress"/"+i.toString()+".png";

if (i == 40)
    {
    i=0;
    }
i++;
document.getElementById('picture').src = img;
}

现在，我被要求的下一步是使用svg实现这一点

当然，我也可以用svg做同样的事情，但我已经读过关于能够为svg制作动画的文章

第一个大问题是： 我应该制作一个包含所有41个图像的svg文件作为代码，还是应该只制作一个图像，并通过为针创建自己的轴来设置针的动画

请注意，动画状态将与javascript代码密切相关，javascript代码通过定义设备状态的xmlHTTP“获取”十六进制值。 因此，如果我旋转设备上的旋钮，我想将svg上的指针转到3伏。 我不要求一个完整的解决方案，但一些提示，如果这是可能的，我需要阅读什么

这是我作为一个例子谈论的img

---

包含41个组的SVG可能是一个大文件。如果创建一个仅包含一个图像的SVG，其中针是一个定义了ID的

组，则可以从JavaScript中引用该组，并使针旋转，即使使用平滑的动画也是如此

您可以为针可能处于的每个状态定义一个CSS类，其中包含旋转：

.pos20 {
  transform: rotate(45deg);
}

Internet Explorer对此提供了一些支持，因此您可能需要直接在组上设置一个属性：

<g transform="rotate(45deg)">...</g>

。。。

---

有关SVG转换的详细信息，请参阅CSS技巧。

包含41个组的SVG可能是一个大文件。如果创建一个仅包含一个图像的SVG，其中针是一个定义了ID的

组，则可以从JavaScript中引用该组，并使针旋转，即使使用平滑的动画也是如此

您可以为针可能处于的每个状态定义一个CSS类，其中包含旋转：

.pos20 {
  transform: rotate(45deg);
}

Internet Explorer对此提供了一些支持，因此您可能需要直接在组上设置一个属性：

<g transform="rotate(45deg)">...</g>

。。。

---

有关SVG转换的详细信息，请参阅CSS技巧。

请只写与问题相关的内容请只写与问题相关的内容现在听起来更优雅，令人惊讶的是没有那么复杂，非常感谢！现在听起来更优雅，令人惊讶的是没有那么复杂，非常感谢你的支持！