SVG中的linearGradient元素

本文作者: jsweibo

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

摘要

本文主要讲述了：

作用
attribute

正文

作用

定义线性渐变

示例：

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

attribute

gradientTransform

变换（transform）渐变的坐标系

示例：水平向右移动 0.2

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

示例：顺时针旋转 90°

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

href

渐变的 URL

用于复用渐变

示例：

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

x1

起点的 x 坐标，用于确定渐变方向

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </linearGradient>
    <linearGradient id="r2l" href="#foo" x1="1" y1="0" x2="0" y2="0"/>
    <linearGradient id="t2b" href="#foo" x1="0" y1="0" x2="0" y2="1"/>
    <linearGradient id="b2t" href="#foo" x1="0" y1="1" x2="0" y2="0"/>
    <linearGradient id="b2t" href="#foo" x1="0" y1="1" x2="0" y2="0"/>
    <linearGradient id="ne2sw" href="#foo" x1="1" y1="0" x2="0" y2="1"/>
    <linearGradient id="nw2se" href="#foo" x1="0" y1="0" x2="1" y2="1"/>
    <rect width="50" height="50" style="fill:url(#foo)"/>
    <rect x="50" y="0" width="50" height="50" style="fill:url(#r2l)"/>
    <rect x="100" y="0" width="50" height="50" style="fill:url(#t2b)"/>
    <rect x="0" y="50" width="50" height="50" style="fill:url(#b2t)"/>
    <rect x="50" y="50" width="50" height="50" style="fill:url(#ne2sw)"/>
    <rect x="100" y="50" width="50" height="50" style="fill:url(#nw2se)"/>
</svg>

y1

起点的 y 坐标，用于确定渐变方向

x2

终点的 x 坐标，用于确定渐变方向

y2

终点的 y 坐标，用于确定渐变方向

spreadMethod

渐变区域之外的区域如何填充

当x1、y1、x2、y2定义的渐变范围不足以填充待填充区域时有效。

pad 就近填充
reflect 对称填充
repeat 重复填充

默认值为pad

示例：就近填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </linearGradient>
    <linearGradient id="bar" href="#foo" x1="0.5" x2="1" spreadMethod="pad"/>
    <rect width="50" height="50" style="fill:url(#foo)"/>
    <rect x="50" y="50" width="50" height="50" style="fill:url(#bar)"/>
</svg>

示例：对称填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </linearGradient>
    <linearGradient id="bar" href="#foo" x1="0.5" x2="1" spreadMethod="reflect"/>
    <rect width="50" height="50" style="fill:url(#foo)"/>
    <rect x="50" y="50" width="50" height="50" style="fill:url(#bar)"/>
</svg>

示例：重复填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </linearGradient>
    <linearGradient id="bar" href="#foo" x1="0.5" x2="1" spreadMethod="repeat"/>
    <rect width="50" height="50" style="fill:url(#foo)"/>
    <rect x="50" y="50" width="50" height="50" style="fill:url(#bar)"/>
</svg>

gradientUnits

定义x1、y1、x2、y2的坐标系及单位长度

objectBoundingBox 相对于待填充区域的小数或百分比，最小为 0，最大为 1
userSpaceOnUse 相对于<svg>的 viewport 而言

默认值为objectBoundingBox

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="foo" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="50" y2="0">
        <stop offset="0" stop-color="#00f"/>
        <stop offset="0.5" stop-color="#0f0"/>
        <stop offset="1" stop-color="#0ff"/>
    </linearGradient>
    <linearGradient id="r2l" href="#foo" x1="100" y1="0" x2="50" y2="0"/>
    <linearGradient id="t2b" href="#foo" x1="0" y1="0" x2="0" y2="50"/>
    <linearGradient id="b2t" href="#foo" x1="0" y1="100" x2="0" y2="50"/>
    <linearGradient id="ne2sw" href="#foo" x1="100" y1="50" x2="50" y2="100"/>
    <linearGradient id="nw2se" href="#foo" x1="100" y1="50" x2="150" y2="100"/>
    <rect width="50" height="50" style="fill:url(#foo)"/>
    <rect x="50" y="0" width="50" height="50" style="fill:url(#r2l)"/>
    <rect x="100" y="0" width="50" height="50" style="fill:url(#t2b)"/>
    <rect x="0" y="50" width="50" height="50" style="fill:url(#b2t)"/>
    <rect x="50" y="50" width="50" height="50" style="fill:url(#ne2sw)"/>
    <rect x="100" y="50" width="50" height="50" style="fill:url(#nw2se)"/>
</svg>