svg渐变效果

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<g fill="dodgerblue" font-size="30" font-family="楷体">

    <text x="20" y="40">

        svg线性渐变

    </text>

</g>

<defs>

    <linearGradient id="colorGradient">

        <stop offset="0%" stop-color="#0000ff"/>

        <stop offset="100%" stop-color="#00ffff"/>

    </linearGradient>

    <linearGradient id="alphaGradient" x1="0" y1="0" x2="0" y2="100%">

        <stop offset="0%" stop-color="#0000ff" stop-opacity="1"/>

        <stop offset="100%" stop-color="#00ffff" stop-opacity="0"/>

    </linearGradient>

</defs>

<rect x="10" y="50" width="100" height="200" ry="20" fill="url(#colorGradient)"/>

<rect x="110" y="50" width="100" height="200" ry="20" fill="url(#alphaGradient)"/>

</svg>