MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 565197 of attributeName

  • Revision slug: Web/SVG/Attribute/attributeName
  • Revision title: attributeName
  • Revision id: 565197
  • Created:
  • Creator: SueSmith
  • Is current revision? Yes
  • Comment

Revision Content

« SVG Attribute reference home

This attribute indicates the name of the attribute in the parent element that is going to be changed during an animation. 

Usage context

Categories Animation attribute target attribute
Value <attributeName>
Animatable No
Normative document SVG 1.1 (2nd Edition)

Example

This example uses y as the attributeName to animate a rectangle shape by changing its position on the Y axis.

<?xml version="1.0"?>
<svg width="250" height="250"
  viewPort="0 0 250 250" version="1.1"
  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"/>
  </rect>
</svg>

 

Elements

The following elements can use the attributeName attribute

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

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>This attribute indicates the name of the attribute in the parent element that is going to be changed during an animation.&nbsp;</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Animation attribute target attribute</td>
  </tr>
  <tr>
   <th scope="row">Value</th>
   <td>&lt;attributeName&gt;</td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Example">Example</h2>
<p>This example uses <code>y</code> as the <code>attributeName</code> to animate a rectangle shape by changing its position on the Y axis.</p>
<pre class="brush: xml">
&lt;?xml version="1.0"?&gt;
&lt;svg width="250" height="250"
&nbsp; viewPort="0 0 250 250" version="1.1"
&nbsp; xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="50" y="50" width="100" height="100"&gt;
&nbsp;   &lt;animate attributeType="XML"
&nbsp;&nbsp;&nbsp;   attributeName="y"
&nbsp;&nbsp;&nbsp;   from="0" to="50"
&nbsp;&nbsp;&nbsp;   dur="5s"/&gt;
  &lt;/rect&gt;
&lt;/svg&gt;</pre>
<p>&nbsp;</p>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>attributeName</code> attribute</p>
<ul>
 <li>{{ SVGElement("animate") }}</li>
 <li>{{ SVGElement("animateColor") }}</li>
 <li>{{ SVGElement("animateTransform") }}</li>
 <li>{{ SVGElement("set") }}</li>
</ul>
Revert to this revision