<stop>
SVG 的 <stop>
元素定义了要在渐变中使用的颜色及其位置。此元素始终是 <linearGradient>
或 <radialGradient>
元素的子元素。
示例
html
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
属性
offset
-
此属性定义渐变停止点在渐变矢量上的放置位置。值类型:<number>|<percentage>;默认值:
0
;可动画化:是 stop-color
-
此属性定义渐变停止点的颜色。它可以用作 CSS 属性。值类型:
currentcolor
|<color>|<icccolor>;默认值:black
;可动画化:是 stop-opacity
-
此属性定义渐变停止点的透明度。它可以用作 CSS 属性。值类型:<opacity>;默认值:
1
;可动画化:是
使用上下文
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # 渐变停止点 |
浏览器兼容性
BCD 表格仅在浏览器中加载