极客笔记HTML SVG：何时使用animVal / baseVal
在本文中，我们将介绍何时使用SVG中的animVal和baseVal。SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML语言，通过使用SVG可以创建丰富多彩且具有互动性的图形。在SVG中，属性的值可以使用animVal和baseVal来获取，这两种方法的使用取决于具体的情况。
阅读更多：HTML 教程
animVal和baseVal的区别
animVal是用于获取当前动画计算结果的属性值，而baseVal是用于获取未经动画计算的属性值。这两个方法经常用于处理动画效果和过渡。动画是SVG中的一个重要特性，可以通过指定起始和结束值，以及动画的持续时间和速度，来实现各种各样的动画效果。
使用animVal获取动画属性值
当需要获取当前动画计算结果的属性值时，可以使用animVal方法。animVal方法会返回属性在动画过程中的当前值。例如，我们可以使用以下代码获取圆的半径属性的动画值：
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<circle cx="150" cy="150" r="50" id="myCircle">
<animate attributeName="r" begin="0s" dur="5s" from="50" to="100" repeatCount="indefinite" />
</circle>
</svg>
<script>
var circle = document.getElementById("myCircle");
var radius = circle.r.animVal;
console.log("当前半径值：" + radius);
</script>
在上面的示例中，我们通过document.getElementById方法获取id为myCircle的圆形元素，然后使用.r.animVal获取圆形的半径属性的动画值。通过在控制台输出结果可以看到当前半径的值。
使用baseVal获取非动画属性值
当不需要考虑动画效果，只需要获取未经动画计算的属性值时，可以使用baseVal方法。baseVal方法会返回属性的原始值，而不受动画效果的影响。例如，我们可以使用以下代码获取圆的半径属性的原始值：
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<circle cx="150" cy="150" r="50" id="myCircle" />
</svg>
<script>
var circle = document.getElementById("myCircle");
var radius = circle.r.baseVal.value;
console.log("原始半径值：" + radius);
</script>
在上面的示例中，我们通过document.getElementById方法获取id为myCircle的圆形元素，然后使用.r.baseVal.value获取圆形的半径属性的原始值。通过在控制台输出结果可以看到原始半径的值。
animVal和baseVal的应用场景
animVal和baseVal在SVG中的应用场景各有不同。当需要实时获取动画计算结果的属性值时，应使用animVal方法。例如，当需要根据动画的计算结果进行条件判断或逻辑运算时，可以使用animVal方法获取准确的属性值。
而当只需要获取属性的原始值，并且不关心任何动画效果时，应使用baseVal方法。例如，当需要将属性值作为参数进行计算或传递给其他函数时，可以使用baseVal方法来获取准确的属性值。
总结
通过本文，我们了解了SVG中的animVal和baseVal的用途和区别。animVal用于获取当前动画计算结果的属性值，而baseVal用于获取未经动画计算的属性值。我们还学习了如何使用这两个方法以及它们的应用场景。在实际开发中，根据需要选择使用animVal还是baseVal方法，可以更好地处理SVG中的动画效果和属性值获取。