填充
fill
属性有两个不同的含义。对于形状和文本,它是一个表示属性,定义用于绘制元素的颜色(或任何 SVG 绘制服务器,如渐变或图案);对于动画,它定义动画的最终状态。
SVG 表示属性 fill
和 CSS fill
属性可与以下 SVG 元素一起使用
SVG fill
属性可用于定义以下 SVG 元素的最终动画状态
示例
基本颜色和渐变填充以及动画
<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>
元素定义了三个形状,每个形状都有不同的 stroke
和 fill
颜色设置。我们还通过 <marker>
元素定义了一个 <circle>
元素作为标记。每个形状都通过 marker
CSS 属性应用了标记。
<circle>
设置了 stroke="context-stroke"
和 fill="context-fill"
。由于它在形状的上下文中被设置为标记,因此这些属性使其继承了在每种情况下 <path>
元素上设置的 fill
和 stroke
。
<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-stroke
和 context-fill
来继承 stroke
和 fill
值。
动画
对于 <animate>
,fill
定义动画的最终状态。
值 | freeze (保持最后一帧动画的状态)| remove (保持第一帧动画的状态) |
---|---|
默认值 | remove |
可动画 | 否 |
运动动画
对于 <animateMotion>
,fill
定义动画的最终状态。
值 | freeze (保持最后一帧动画的状态)| remove (保持第一帧动画的状态) |
---|---|
默认值 | remove |
可动画 | 否 |
变换动画
对于 <animateTransform>
,fill
定义动画的最终状态。
值 | freeze (保持最后一帧动画的状态)| remove (保持第一帧动画的状态) |
---|---|
默认值 | remove |
可动画 | 否 |
圆形
椭圆
路径
多边形
折线
对于 <polyline>
,fill
是一个表示属性,定义形状内部的颜色。(内部由 fill-rule 属性或 fill-rule
属性定义。)
值 | <paint> |
---|---|
默认值 | 黑色 |
可动画 | 是 |
注意:作为表示属性,fill
可以用作 CSS 属性。
矩形
设置
对于 <set>
,fill
定义动画的最终状态。
值 | freeze (保持最后一帧动画的状态)| remove (保持第一帧动画的状态) |
---|---|
默认值 | remove |
可动画 | 否 |
文本
文本路径
tref
tspan
规范
规范 |
---|
可缩放矢量图形 (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 的浏览器中加载。