javascript - 使用带有 ajax 的 SVG 为 IO 硬件的状态设置动画

Question

我工作的公司正在销售可以管理和监控不同 IO 设备的微型计算机。他们将 ajax 用于 Web IO 内容，我为电压表创建了一个新图形，其中包含从 0 伏到 20 伏的 41 种状态，步进为 0.5。我的第一个问题是，是否因为图像太多而被称为 Sprite ？

我写的加载图片的代码已经比公司的短很多了，因为我做了一个通过计数器生成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 代码密切相关，该代码通过定义设备状态的 xmlHTTP“获取”十六进制值。所以如果我旋转设备上的旋钮，我想将 svg 上的针调到 3 伏。我不要求完整的解决方案，但会提供一些提示，说明这是否可行以及我需要阅读的内容。

这是我正在谈论的 img 作为示例 Voltmeter

https://www.deviantart.com/blue-lovag/art/Voltmeter-759876423

Answer 1

包含 41 个组的 SVG 可能是一个大文件。如果您创建一个仅包含一个图像的 SVG，其中针是 <g>定义了 ID 的组，您可以从 JavaScript 引用该组并让针旋转——即使是平滑的动画。

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

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

Internet Explorer 对此有一些支持，因此您可能必须直接在组上设置一个属性:

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

请引用this article在 CSS-Tricks 上了解有关 SVG 转换的详细信息。