2020-01-08

语言►SVG

SVG中的radialGradient元素

本文作者: jsweibo

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

摘要

本文主要讲述了：

作用
attribute

正文

作用

定义径向渐变

示例：

<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

gradientTransform

变换（transform）渐变的坐标系

示例：水平向右移动 0.2

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient 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"/>
    </radialGradient>
    <rect width="100" height="100" style="fill:url(#foo)"/>
</svg>

href

渐变的 URL

用于复用渐变

示例：

<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>
    <radialGradient id="bar" href="#foo"/>
    <rect width="100" height="100" style="fill:url(#bar)"/>
</svg>

cx

圆心的 x 坐标

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" cx="0.3" cy="0.3">
        <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>

cy

圆心的 y 坐标

r

圆的半径

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" r="1">
        <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>

fr

起始圆的半径

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" fr="0.2">
        <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>

fx

起始圆的 x 坐标

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" fx="0.3" fy="0.3">
        <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>

fy

起始圆的 y 坐标

spreadMethod

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

当cx、cy、r定义的渐变范围不足以填充待填充区域时有效。

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

默认值为pad

示例：就近填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" r="0.3" spreadMethod="pad">
        <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>

示例：对称填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" r="0.3" spreadMethod="reflect">
        <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>

示例：重复填充

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" r="0.3" spreadMethod="repeat">
        <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>

gradientUnits

定义cx、cy、r、fx、fy、fr的坐标系及单位长度

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

默认值为objectBoundingBox

示例：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
    <radialGradient id="foo" cx="50" cy="50" r="50" gradientUnits="userSpaceOnUse">
        <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>