diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md index 2685709224bb11..1aeb222088b400 100644 --- a/files/zh-cn/web/svg/attribute/attributename/index.md +++ b/files/zh-cn/web/svg/attribute/attributename/index.md @@ -1,47 +1,72 @@ --- title: attributeName slug: Web/SVG/Attribute/attributeName +l10n: + sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0 --- {{SVGRef}} -该属性标识了在一个动画动作环节中,父元素的需要被改变的属性名。 +**`attributeName`** 属性表示动画期间将要更改的目标元素的 CSS 属性或属性的名称。 -## 使用说明 +你可以将此属性与以下 SVG 元素一起使用: -| 类别 | 动画属性目标属性 | -| -------- | ------------------------------------------------------------------------------------- | -| 值 | \ | -| 可变性 | No | -| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) | +- {{SVGElement("animate")}} +- {{SVGElement("animateTransform")}} +- {{SVGElement("set")}} ## 示例 -下面的示例使用了 y 作为`attributeName`,通过改变一个矩形在 Y 轴上的位置来变动这个矩形。 +```css hidden +html, +body, +svg { + height: 100%; +} +``` -```xml - - +```html + - + from="0" + to="50" + dur="5s" + repeatCount="indefinite" /> ``` -## 元素 +{{EmbedLiveSample("示例", "400", "250")}} + +## 使用说明 -下列元素可以使用`attributeName`属性: + + + + + + + + + + + + + + + +
<name>
默认值None
动画性
-- {{ SVGElement("animate") }} -- {{ SVGElement("animateColor") }} -- {{ SVGElement("animateTransform") }} -- {{ SVGElement("set") }} +- `` + - :此值表示要动画化的目标元素的 CSS 属性或属性的名称。 ## 规范 {{Specifications}} + +## 参见 + +- [SMIL 动画规范](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute)