javascript - 支持所有浏览器的 SVG 旋转

Question

我已经在周五发布了一篇关于如何开始使用 SVG 动画来显示 IO 硬件状态的帖子。

我现在已经读了一点，因为我是这样使用 CSS 的

svg {
    transform: rotate(45deg);
    transform-origin: 50% 50%;  
}

遗憾的是，对 IE 的支持是通过将属性直接提供给 svg:

<rect x='65' y='65' width='150' height='80' 
    transform='rotate(45 140 105) rotate(-45)' />

现在我使用了一个矩形作为示例，但实际上我使用的是一个形状，因为我需要为电压表的指针制作动画。

也许我可以使用中风，但用真正的针之类的东西看起来会更好。

现在我遇到的问题是，在设计之后，必须有一个用 Javascript 编写的函数才能到达不同的状态。

因此，对于从 IO 获得的每个值，我想将指针旋转 2 度。

需要 21 个状态，当直接在其上设置属性时，计算变换旋转的所有位置将是一项艰巨的工作。

还有别的办法吗？提前致谢。

Answer 1

1. 设置 id针的属性，因此您可以瞄准它。
2. 找到旋转的中心点。
3. 设置针可以旋转的最小和最大 Angular 。
4. 设置您可以获得的最小值和最大值。

现在，如果您的 SVG 内容是运行脚本的同一文档的一部分，无论它是 HTML 还是 SVG 文件:

var needle = document.getElementById('voltmeterNeedle'); // use your id

如果您使用 <object> 链接 SVG 内容或 <iframe>运行脚本的文档中的标记(<img> 将不起作用):

var needle, svg = document.getElementById('embedingTag'); // use your id
svg.addEventListener('load', function () { // wait for load event
    needle = svg.contentCocument.getElementById('voltmeterNeedle'); // use your id
});

...两者继续:

var needleCenterX = 140, needleCenterY = 105;
var minAngle = -45, maxAngle = 45;
var minValue = 0, maxValue = 21;

function setNeedle (value) {
    var valueRatio = (value - minValue) / (maxValue - minValue);
    var angle = (maxAngle - minAngle) * valueRatio + minAngle;
    var rotation = [angle, needleCenterX, needleCenterY].join(' ');

    needle.setAttribute('transform', 'rotate(' + rotation + ')');
}