ContextQMD
Back to Content

attributeName

files/en-us/web/svg/reference/attribute/attributename/index.md

latest1.3 KB
Original Source

The attributeName attribute indicates the name of the CSS property or attribute of the target element that is going to be changed during an animation.

You can use this attribute with the following SVG elements:

  • {{SVGElement("animate")}}
  • {{SVGElement("animateTransform")}}
  • {{SVGElement("set")}}

Example

css
html,
body,
svg {
  height: 100%;
}
html
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="0"
      to="50"
      dur="5s"
      repeatCount="indefinite" />
  </rect>
</svg>

{{EmbedLiveSample("Example", "400", "250")}}

Usage notes

<table class="properties"> <tbody> <tr> <th scope="row">Value</th> <td><code>&#x3C;name></code></td> </tr> <tr> <th scope="row">Default value</th> <td><em>None</em></td> </tr> <tr> <th scope="row">Animatable</th> <td>No</td> </tr> </tbody> </table>
  • <name>
    • : This value indicates the name of the CSS property or attribute of the target element to be animated.

Specifications

{{Specifications}}

See also