<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.

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

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

备注: <set> 元素是非累加性的。additiveaccumulate 属性不被允许,如果指定了这些属性,将会被忽略。

示例

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
set
fill
href
systemLanguage
to

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见