---
title: animateColor
slug: Web/SVG/Element/animateColor
tags:
  - SVG
  - SVG动画
  - 元素
  - 需要兼容性表
translation_of: Web/SVG/Element/animateColor
---
<div>{{SVGRef}}{{deprecated_header}}</div>

<div class="warning">
<p>该元素在SVG1.1 第二版中不建议使用，在将来的SVG版本中可能被移除。它提供的功能，在{{ SVGElement("animate") }}元素中都可用，而且不能在火狐或Internet Explorer中实现。作者必须使用{{ SVGElement("animate") }}元素代替它。</p>
</div>

<p><strong><code>&lt;animateColor&gt; </code></strong>SVG元素指定了一个颜色随着时间的变换。</p>

<h2 id="用法">用法</h2>

<p>{{svginfo}}</p>

<h2 id="属性">属性</h2>

<h3 id="全局属性">全局属性</h3>

<ul>
 <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">动画事件属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">动画属性目标属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">动画定时属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">动画值属性</a> »</li>
 <li><a href="/en-US/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">动画累加属性</a> »</li>
 <li><a>{{SVGAttr("externalResourcesRequired")}}</a> »</li>
</ul>

<h3 id="特定属性">特定属性</h3>

<ul>
 <li>{{SVGAttr("by")}}</li>
 <li>{{SVGAttr("from")}}</li>
 <li>{{SVGAttr("to")}}</li>
</ul>

<h2 id="DOM_Interface">DOM Interface</h2>

<p>This element implements the {{domxref("SVGAnimateColorElement")}} interface.</p>

<h2 id="Example">Example</h2>

<h3 id="SVG">SVG</h3>

<pre><code>&lt;svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="60" cy="60" r="50"&gt;
    &lt;animateColor attributeName="fill" attributeType="XML"
        from="black" to="red" dur="6s" repeatCount="indefinite"/&gt;
  &lt;/circle&gt;
&lt;/svg&gt;</code></pre>

<h3 id="Result">Result</h3>

<p>{{EmbedLiveSample("Example", 120, 120)}}</p>

<h2 id="Specifications">Specifications</h2>

<table>
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("SVG1.1", "animate.html#AnimateColorElement", "&lt;animateColor&gt;")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

{{Compat("svg.elements.animateColor")}}

<h2 id="See_also">See also</h2>

<ul>
 <li>{{SVGElement("animate")}}</li>
</ul>

<p> </p>

<h2 id="sect1"> </h2>

<ul>
</ul>

<h3 id="sect2"> </h3>