SVG绘制渐变对象

越陌度阡

发布于 2020-11-26 15:01:42

4340

发布于 2020-11-26 15:01:42

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

运用SVG实现一个渐变对象效果。

实现效果如下：

实现代码如下：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>SVG绘图渐变对象</title>
    <style>
        body {
            text-align: center;
        }

        svg {
            background: #ddd;
        }
    </style>
</head>

<body>
    <h1>SVG绘图渐变对象</h1>
    <svg id="s9" width="500" height="400">
        <defs>
            <linearGradient id="g0" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0" stop-color="red"></stop>
                <stop offset="1" stop-color="red" stop-opacity="0"></stop>
            </linearGradient>

            <linearGradient id="g1" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0" stop-color="green"></stop>
                <stop offset="1" stop-color="green" stop-opacity="0"></stop>
            </linearGradient>

            <linearGradient id="g2" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0" stop-color="blue"></stop>
                <stop offset="1" stop-color="blue" stop-opacity="0"></stop>
            </linearGradient>
        </defs>
        <rect width="50" height="100" x="100" y="50" fill="url(#g0)"></rect>
        <rect width="50" height="300" x="200" y="50" fill="url(#g1)"></rect>
        <rect width="50" height="200" x="300" y="50" fill="url(#g2)"></rect>
    </svg>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/06/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

svg