SVG tableValues 属性

SVG（Scalable Vector Graphics）是一种用于定义二维图形的XML标记语言。SVG图像可以通过文本编辑器进行编辑，并且可以通过JavaScript处理和动态修改。SVG图像具有可缩放性，即可以在任何尺寸下进行渲染而不会失真。

其中，tableValues 属性是用于定义渐变中渐变颜色所占的位置和颜色值的列表。以下是一些关于该属性的详细介绍。

语法

<animate attributeName="tableValues"
         from="list-of-values"
         to="list-of-values"
         dur="time"
         repeatCount="indefinite" />

属性值

• tableValues：定义渐变中渐变颜色所占的位置和颜色值的列表。该属性的值是由一系列包含 2 个值（位置和颜色）的子列表组成的。

• from：定义动画的起始值。该属性的值也应该是由一系列包含 2 个值（位置和颜色）的子列表组成的。

• to：定义动画的结束值。该属性的值也应该是由一系列包含 2 个值（位置和颜色）的子列表组成的。

• dur：定义动画的持续时间，以秒为单位。

• repeatCount：定义动画的重复次数。可选值为 indefinite（永久重复动画）和一个具体数字（动画重复的次数）。

示例

<svg width="100%" height="100%">
  <linearGradient id="exampleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop id="stop1" offset="0%" stop-color="red" />
    <stop id="stop2" offset="100%" stop-color="blue" />
    <animate attributeName="tableValues"
             from="0 1; 1 0"
             to="0.25 0.75; 0.75 0.25"
             dur="3s"
             repeatCount="indefinite" />
  </linearGradient>
  <rect x="10" y="10" width="200" height="100" fill="url(#exampleGradient)" />
</svg>

上述示例代码创建了一个线性渐变，从红色到蓝色。tableValues 属性被添加到 <animate> 元素中，它定义了从起始位置（0 1）到结束位置（0.25 0.75）和（0.75 0.25）所占的位置和颜色值的列表。在 dur 属性中，该动画的持续时间设置为 3 秒，并且在 repeatCount 属性中，该动画将无限制地重复。当该动画在定期时间内不断重复时，将出现一个颜色动态变化的效果。

结论

tableValues 属性可以与 animate 属性结合使用，创建出让人印象深刻的渐变动画效果。程序员可以根据实际需求使用该属性，从而构建出更加生动、形象的 SVG 图形内容。