svg动画制作_如何制作动画SVG车速表

最新推荐文章于 2024-06-18 15:15:42 发布

cune1359

最新推荐文章于 2024-06-18 15:15:42 发布

阅读量1.1k

点赞数

文章标签： css html5 html js css3 ViewUI

量规是一种工具，可以直观地指示给定范围内的值。在计算机中，“磁盘空间指示器”使用量规来显示可用磁盘空间总量。量规在其范围内具有区域或区域，每种区域或区域都有其自己的颜色。在前端开发中，我们可以使用<meter> HTML5标签显示特定范围内的数据。

在本文中，我们将制作一个半圆形的SVG量规 ，并对其进行动画处理。看一下这个预览GIF，它显示了最终版本在Firefox中的工作方式 ：

仪表的范围是0-100 ，并以黄色，蓝色和红色显示三个相等的区域 。您可以根据需要更改区域的范围和数量。

为了便于说明，我将执行手动计算，并在以下步骤中使用内联SVG属性/属性。

但是，我的最终演示将CSS和JavaScript用于SVG属性的计算和插入，以使其更加灵活。

让我们在SVG中画一个简单的圆圈。 HTML5的新<svg>标记使我们可以将SVG添加到HTML代码中。在<svg>标记内，我们添加<circle> SVG形状，如下所示：

<div id="wrapper">
  <svg id="meter">
    <circle r="150" cx="50%" cy="50%"></circle>
  </svg>
</div>

在CSS中，让我们向包装器添加width和height属性，它们都大于或等于圆的直径（在我们的示例中为300px）。我们还需要将#meter元素的宽度和高度设置为100％。

#wrapper{
  width: 400px;
  height: 400px;
}

#meter{
  width: 100%;
  height: 100%;
}

借助stroke和stroke-width SVG属性，我们向圆添加了轮廓，并且通过使用fill="none"属性，我们也删除了圆的填充。

<circle id="low" r="150" cx="50%" cy="50%" stroke="#FDE47F"
stroke-width="60" fill="none"></circle>

对于半圆轮廓， dash length值必须等于圆的半周长，以使短划线覆盖圆的一半圆周，并且gap length值必须等于或大于其余圆周。

如果更多，它将被浏览器转换为剩余的周长，因此我们将使用全周长值作为gap length 。这样我们可以避免计算剩余周长。

让我们看一下计算：

圆周 = 2 Ã???????¢????? π × [R

其中r是半径。对于半径150，圆周为：

圆周 =

关注