填充

fill 属性有两个不同的含义。对于形状和文本,它是一个表示属性,定义用于绘制元素的颜色(或任何 SVG 绘制服务器,如渐变或图案);对于动画,它定义动画的最终状态。

SVG 表示属性 fill 和 CSS fill 属性可与以下 SVG 元素一起使用

SVG fill 属性可用于定义以下 SVG 元素的最终动画状态

示例

基本颜色和渐变填充以及动画

html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple color fill -->
  <circle cx="50" cy="50" r="40" fill="pink" />

  <!-- Fill circle with a gradient -->
  <defs>
    <radialGradient id="myGradient">
      <stop offset="0%" stop-color="pink" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>

  <circle cx="150" cy="50" r="40" fill="url(#myGradient)" />

  <!--
  Keeping the final state of an animated circle
  which is a circle with a radius of 40.
  -->
  <circle cx="250" cy="50" r="20">
    <animate
      attributeType="XML"
      attributeName="r"
      from="0"
      to="40"
      dur="5s"
      fill="freeze" />
  </circle>
</svg>

context-fill 示例

在此示例中,我们使用 <path> 元素定义了三个形状,每个形状都有不同的 strokefill 颜色设置。我们还通过 <marker> 元素定义了一个 <circle> 元素作为标记。每个形状都通过 marker CSS 属性应用了标记。

<circle> 设置了 stroke="context-stroke"fill="context-fill"。由于它在形状的上下文中被设置为标记,因此这些属性使其继承了在每种情况下 <path> 元素上设置的 fillstroke

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <style>
    path {
      stroke-width: 2px;
      marker: url(#circle);
    }
  </style>
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z"
        stroke="red" fill="orange" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z"
        stroke="green" fill="lightgreen" />
  <path d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z"
        stroke="blue" fill="lightblue" />
  <marker id="circle" markerWidth="12" markerHeight="12"
          refX="6" refY="6" markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2"
            stroke="context-stroke" fill="context-fill"  />
  </marker>
</svg>

输出如下

注意:当元素被 <use> 元素引用时,元素也可以使用 context-strokecontext-fill 来继承 strokefill 值。

动画

对于 <animate>fill 定义动画的最终状态。

freeze保持最后一帧动画的状态)| remove保持第一帧动画的状态
默认值 remove
可动画

运动动画

对于 <animateMotion>fill 定义动画的最终状态。

freeze保持最后一帧动画的状态)| remove保持第一帧动画的状态
默认值 remove
可动画

变换动画

对于 <animateTransform>fill 定义动画的最终状态。

freeze保持最后一帧动画的状态)| remove保持第一帧动画的状态
默认值 remove
可动画

圆形

对于 <circle>fill 是一个表示属性,定义圆的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

椭圆

对于 <ellipse>fill 是一个表示属性,定义椭圆的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

路径

对于 <path>fill 是一个表示属性,定义形状内部的颜色。(内部由 fill-rule 属性或 fill-rule 属性定义。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

多边形

对于 <polygon>fill 是一个表示属性,定义形状内部的颜色。(内部由 fill-rule 属性或 fill-rule 属性定义。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

折线

对于 <polyline>fill 是一个表示属性,定义形状内部的颜色。(内部由 fill-rule 属性或 fill-rule 属性定义。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

矩形

对于 <rect>fill 是一个表示属性,定义矩形颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

设置

对于 <set>fill 定义动画的最终状态。

freeze保持最后一帧动画的状态)| remove保持第一帧动画的状态
默认值 remove
可动画

文本

对于 <text>fill 是一个表示属性,定义文本的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

文本路径

对于 <textPath>fill 是一个表示属性,定义文本的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

tref

警告:从 SVG2 开始,<tref> 已弃用,不应使用。

对于 <tref>fill 是一个表示属性,定义文本的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

tspan

对于 <tspan>fill 是一个表示属性,定义文本的颜色。

<paint>
默认值 黑色
可动画

注意:作为表示属性,fill 可以用作 CSS 属性。

规范

规范
可缩放矢量图形 (SVG) 2
# 指定填充绘制

浏览器兼容性

svg.elements.circle.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.ellipse.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.path.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.polygon.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.polyline.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.rect.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.text.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.textPath.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.tref.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。

svg.elements.tspan.fill

BCD 表格仅在启用 JavaScript 的浏览器中加载。