首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

fill

基于它使用的上下文,fill属性具有两个含义。

默认情况下,当动画元素结束时,其效果将不再应用于目标属性的表示值。该fill属性可用于在动画元素的活动持续时间结束后保留​​动画的值。

对于形状和文本,该fill属性是一个表示属性,用于定义给定图形元素内部的颜色。所谓的“内部”取决于形状本身和fill-rule属性的值。作为一个表现属性,它也可以直接在CSS样式表中作为属性使用

用法上下文

对于动画元素

Categories

Animation timing attribute

Value

remove | freeze

Animatable

No

Normative document

SVG 1.1 (2nd Edition)

remove——(默认)当动画的活动持续时间结束时,动画效果将被删除(不再应用)。在动画活动结束后,动画不再影响目标(除非动画重新启动)。

freeze——当动画的活动持续时间结束后,在文档持续时间的剩余时间内动画处于冻结状态(或直到动画重新开始)。

对于形状和文字

Categories

Presentation attribute

Value

<paint>, context-fill, context-stroke

Animatable

Yes

Normative document

SVG 1.1 (2nd Edition)

实例

例1:简单的SVG

代码语言:javascript
复制
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="100" fill="#666"/>
</svg>

结果

运用 context-fill

有关使用非标准和限制context-fill(和context-stroke)值的信息,请参阅该-moz-context-properties属性的文档。

扫码关注腾讯云开发者

领取腾讯云代金券