Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

stop

一个渐变上的颜色坡度,是用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>

示例输出:

属性

全局属性

专有属性

DOM 接口

该元素实现了SVGStopElement接口。

浏览器兼容性

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

该表格基于这些资源

参见

文档标签和贡献者

 此页面的贡献者: Sebastianz, fanxiaojie
 最后编辑者: Sebastianz,