---
title: color
slug: Web/SVG/Attribute/color
tags:
  - SVG
  - SVG属性
translation_of: Web/SVG/Attribute/color
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG 属性参考主页</a></p>

<p><code>color</code> 属性用来为 {{ SVGAttr("fill") }} 属性、{{ SVGAttr("stroke") }} 属性、{{ SvgAttr("stop-color") }} 属性、{{ SVGAttr("flood-color") }} 属性和 {{ SVGAttr("lighting-color") }} 属性提供一个潜在的间接值（<code>currentColor</code>）。</p>

<p>作为一个外观属性，它还可以直接用作CSS样式表的属性。请阅读 {{ cssxref("color","CSS color") }} 以了解更多信息。</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">类别</th>
   <td>外观属性</td>
  </tr>
  <tr>
   <th scope="row">值</th>
   <td><a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a> | inherit</td>
  </tr>
  <tr>
   <th scope="row">规范文档</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProperty">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<h2 id="示例">示例</h2>

<pre class="brush: html">&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
  &lt;g color="green"&gt;
    &lt;rect width="50" height="50" fill="currentColor" /&gt;
    &lt;circle r="25" cx="70" cy="70" stroke="currentColor" fill="none" stroke-width="5" /&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre>

<p>{{ EmbedLiveSample('Example', '100%', '110') }}</p>

<h2 id="元素">元素</h2>

<p>下列元素可以使用<code>color</code>属性：</p>

<ul>
 <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">文本内容元素</a> »</li>
 <li><a href="/en/SVG/Element#Shape_elements" title="en/SVG/Element#Shape_elements">形状元素</a> »</li>
 <li>{{ SVGElement("stop") }}</li>
 <li>{{ SVGElement("feFlood") }}</li>
 <li>{{ SVGElement("feDiffuseLighting") }}</li>
 <li>{{ SVGElement("feSpecularLighting") }}</li>
</ul>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("svg.attributes.presentation.color")}}</p>