values

  • Revision slug: Web/SVG/Attribute/values
  • Revision title: values
  • Revision id: 426911
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment Moved From SVG/Attribute/values to Web/SVG/Attribute/values

Revision Content

« SVG Attribute reference home

The values attribute has two meaning based on the context it's used.

For animation elements, the values attribute is a semicolon-separated list of one or more values. The animation will apply the values in order over the course of the animation. If a list of values is specified, any {{ SVGAttr("from") }}, {{ SVGAttr("to") }} and {{ SVGAttr("by") }} attribute values are ignored.

For the {{ SVGElement("feColorMatrix") }} element, the contents of values depends on the value of attribute {{ SVGAttr("type") }}:

  • For type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.
  • For type="saturate", values is a single real number value (0 to 1).
  • For type="hueRotate", values is a single one real number value (degrees).
  • For type="luminanceToAlpha", values is not applicable.

If the attribute is not specified, then the default behavior depends on the value of attribute {{ SVGAttr("type") }}.

  • If type="matrix", then this attribute defaults to the identity matrix.
  • If type="saturate", then this attribute defaults to the value 1, which results in the identity matrix.
  • If type="hueRotate", then this attribute defaults to the value 0, which results in the identity matrix.

Usage context

For animation elements

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

For the {{ SVGElement("feColorMatrix") }} element

Categories None
Value <list> | <number>
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the values attribute

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>values</code> attribute has two meaning based on the context it's used.</p>
<p>For animation elements, the <code>values</code> attribute is a semicolon-separated list of one or more values. The animation will apply the values in order over the course of the animation. If a list of <code>values</code> is specified, any {{ SVGAttr("from") }}, {{ SVGAttr("to") }} and {{ SVGAttr("by") }} attribute values are ignored.</p>
<p>For the {{ SVGElement("feColorMatrix") }} element, the contents of <code>values</code> depends on the value of attribute {{ SVGAttr("type") }}:</p>
<ul>
  <li>For <code>type="matrix"</code>, <code>values</code> is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.</li>
  <li>For <code>type="saturate"</code>, <code>values</code> is a single real number value (0 to 1).</li>
  <li>For <code>type="hueRotate"</code>, <code>values</code> is a single one real number value (degrees).</li>
  <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> is not applicable.</li>
</ul>
<p>If the attribute is not specified, then the default behavior depends on the value of attribute {{ SVGAttr("type") }}.</p>
<ul>
  <li>If <code>type="matrix"</code>, then this attribute defaults to the identity matrix.</li>
  <li>If <code>type="saturate"</code>, then this attribute defaults to the value 1, which results in the identity matrix.</li>
  <li>If <code>type="hueRotate"</code>, then this attribute defaults to the value 0, which results in the identity matrix.</li>
</ul>
<h2 id="Usage_context">Usage context</h2>
<h3 id="For_animation_elements">For animation elements</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td>Animation value attribute</td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td>&lt;list&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/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h3 id="For_the_.7B.7B_SVGElement(.22feColorMatrix.22)_.7D.7D_element">For the {{ SVGElement("feColorMatrix") }} element</h3>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="row">Categories</th>
      <td><em>None</em></td>
    </tr>
    <tr>
      <th scope="row">Value</th>
      <td>&lt;list&gt; | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint">&lt;number&gt;</a></td>
    </tr>
    <tr>
      <th scope="row">Animatable</th>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Normative document</th>
      <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>values</code> attribute</p>
<ul>
  <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a>&nbsp;»</li>
  <li>{{ SVGElement("feColorMatrix") }}</li>
</ul>
Revert to this revision