stop

<stop>

<stop>SVG元素定义的颜色的坡道上的梯度，这是一个子元素无论是使用<linearGradient>或<radialGradient>元件。

用法上下文

分类	渐变元素
允许的内容	以任意顺序包含以下任意数量的元素：<animate>，<animateColor>，<set>

属性

全局属性

Core attributes

Presentation attributes

class

style

具体属性

offset

stop-color

stop-opacity

DOM接口

这个元素实现了SVGStopElement接口。

例子

SVG

<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>

结果

产品规格

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2The definition of '<stop>' in that specification.	Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of '<stop>' in that specification.	Recommendation	Initial definition

浏览器兼容性

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

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	1.0 (1.8)	No support	(Yes)	3.0.4