<set>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

<set> SVG 元素提供了一种在指定时间内设置属性值的方法。

它支持所有属性类型，包括那些无法合理插值的类型，例如字符串和布尔值。对于可以合理插值的属性，通常更推荐使用 <animate>。

备注： <set> 元素是非累加性的。additive 和 accumulate 属性不被允许，如果指定了这些属性，将会被忽略。

示例

html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    rect {
      cursor: pointer;
    }
    .round {
      rx: 5px;
      fill: green;
    }
  </style>

  <rect id="me" width="10" height="10">
    <set attributeName="class" to="round" begin="me.click" dur="2s" />
  </rect>
</svg>

属性

to

此属性定义了在动画持续时间内应用于目标属性的值。该值必须符合目标属性的要求。值类型：<anything>；默认值：无；动画性：否

使用上下文

类别动画元素
允许的内容任意数量、任意顺序的下列元素：
描述性元素

规范

Specification
SVG Animations Level 2
# SetElement

浏览器兼容性

参见