stop - SVG 编辑

一个渐变上的颜色坡度，是用stop元素定义的。stop元素可以是<linearGradient>元素或者<radialGradient>元素的子元素。

用法

类别	渐变元素
允许的内容物	任意数量、任意排序的下列元素： <animate>, <animateColor>, <set>

示例

<svg width="100%" height="100%" viewBox="0 0 80 40"
     xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <!-- Outline the drawing area in black -->
  <rect fill="none" stroke="black"
        x="0.5" y="0.5" width="79" height="39"/>

  <!-- The rectangle is filled using a linear gradient -->
  <rect fill="url(#MyGradient)" stroke="black" stroke-width="1"
        x="10" y="10" width="60" height="20"/>
</svg>

示例输出：

属性

全局属性

• 核心属性 »
• 外观属性 »
• class
• style

专有属性

• offset
• stop-color
• stop-opacity

DOM 接口

该元素实现了SVGStopElement接口。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	IE	Opera	Safari
Basic support	1.0	1.5 (1.8)	9.0	9.0	3.0.4

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	1.0 (1.8)	未实现	(Yes)	3.0.4

该表格基于这些资源。

参见

• <linearGradient>
• <radialGradient>