SVG中的stop元素

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/01/09/SVG%E4%B8%AD%E7%9A%84stop%E5%85%83%E7%B4%A0/

摘要

本文主要讲述了：

作用
attribute

正文

作用

作为<linearGradient>和<radialGradient>的子元素，用于定义渐变色和渐变位置

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f" stop-opacity="0.5"/>
        <stop offset="0.5" stop-color="#0f0" stop-opacity="0.5"/>
        <stop offset="1" stop-color="#0ff" stop-opacity="0.5"/>
    </linearGradient>
    <rect width="100" height="100" style="fill:url(#foo)"/>
</svg>

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </radialGradient>
    <rect width="100" height="100" style="fill:url(#foo)"/>
</svg>

attribute

offset

渐变位置，取值范围为[0, 1]内的实数，也可以写成百分数的形式

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f" stop-opacity="0.5"/>
        <stop offset="50%" stop-color="#0f0" stop-opacity="0.5"/>
        <stop offset="100%" stop-color="#0ff" stop-opacity="0.5"/>
    </linearGradient>
    <rect width="100" height="100" style="fill:url(#foo)"/>
</svg>