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)' />

现在我以矩形为例，但实际上是在使用形状，因为我需要为电压表的针设置动画。

也许我可以用中风，但是用像thingy这样的真正的针看起来会更好。

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

所以我想针对从IO获得的每个值将指针旋转2度。

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

还有另一种方法吗？预先感谢。

Answer 1

为针设置id属性，以便您可以定位它。
找到要旋转的中心点。
设置针可以旋转的最小和最大角度。
设置您可以接收的最小值和最大值。

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

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

如果您通过运行脚本的文档中的<object>或<iframe>标签链接SVG内容（<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 + ')');
}

SVG旋转并支持所有浏览器

1 个答案: