test/svg.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Image</title>
    <script type="text/javascript" src="esl.js"></script>
</head>
<body>
    <script type="text/javascript">
    require.config({
        packages: [
            {
                name: 'zrender',
                location: '../src',
                main: 'zrender'
            }
        ]
    });

    require(
        [
            'zrender',
            'zrender/graphic/shape/Rect',
            'zrender/graphic/shape/Circle',
            'zrender/graphic/shape/Ring',
            'zrender/graphic/shape/Sector',
            'zrender/graphic/shape/Droplet',
            'zrender/graphic/shape/BezierCurve',
            'zrender/graphic/shape/Ellipse',
            'zrender/graphic/shape/Heart',
            'zrender/graphic/shape/Rose',
            'zrender/graphic/shape/Trochoid',
            'zrender/graphic/shape/Isogon',
            'zrender/graphic/shape/Line',
            'zrender/graphic/shape/Polygon',
            'zrender/graphic/shape/Polyline',
            'zrender/graphic/shape/Star',
            'zrender/graphic/LinearGradient',
            'zrender/graphic/RadialGradient',
            'zrender/svg/svg'
        ],
        function(
            zrender,
            Rect, Circle, Ring, Sector, Droplet,
            BezierCurve, Ellipse, Heart, Rose, Trochoid,
            Isogon, Line, Polygon, Polyline, Star,
            LinearGradient, RadialGradient
        ) {
            // 初始化zrender
            var zr = zrender.init(document.getElementById('main'), {
                renderer: 'svg'
            });

            var gradient1 = new LinearGradient();
            gradient1.addColorStop(0, 'red');
            gradient1.addColorStop(0.7, 'rgb(255, 255, 0)');
            gradient1.addColorStop(1, '#0f0');

            var rect = new Rect({
                shape: {
                    x: 10,
                    y: 10,
                    width: 80,
                    height: 80
                },
                style: {
                    fill: gradient1
                }
            });
            zr.add(rect);

            setTimeout(function () {
                rect.style.fill = {
                    type: 'linear',
                    x: 0,
                    x2: 1,
                    y: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#00f'
                    }, {
                        offset: 1,
                        color: '#f0f'
                    }]
                };
                rect.dirty();
            }, 8000);

            setTimeout(function () {
                gradient1.colorStops[0].color = '#f0f';
                rect.dirty();
            }, 1000);

            setTimeout(function () {
                zr.remove(rect);
            }, 3000);

            setTimeout(function () {
                zr.add(rect);
            }, 5000);

            var gradient2 = new LinearGradient();
            gradient2.addColorStop(0, 'blue');
            gradient2.addColorStop(1, 'yellow');
            gradient2.x2 = 0;
            gradient2.y2 = 1;

            var circle = new Circle({
                shape: {
                    cx: 150,
                    cy: 50,
                    r: 40
                },
                style: {
                    fill: 'none',
                    stroke: gradient2
                }
            });
            zr.add(circle);

            setTimeout(function () {
                zr.remove(circle);
            }, 2000);

            setTimeout(function () {
                zr.add(circle);
            }, 4000);

            var ring = new Ring({
                shape: {
                    cx: 250,
                    cy: 50,
                    r: 40,
                    r0: 30
                },
                style: {
                    fill: gradient1
                }
            });
            zr.add(ring);

            setTimeout(function () {
                zr.remove(ring);
            }, 4000);

            setTimeout(function () {
                zr.add(ring);
            }, 6000);

            var sector = new Sector({
                shape: {
                    cx: 350,
                    cy: 50,
                    r: 40,
                    r0: 30,
                    startAngle: Math.PI / 6,
                    endAngle: Math.PI
                }
            });
            zr.add(sector);

            var gradient3 = new RadialGradient();
            gradient3.addColorStop(0, 'red');
            gradient3.addColorStop(1, 'green');

            var drop = new Droplet({
                shape: {
                    cx: 350,
                    cy: 50,
                    width: 20,
                    height: 30
                },
                style: {
                    fill: gradient3
                }
            });
            zr.add(drop);

            var curve = new BezierCurve({
                shape: {
                    x1: 400,
                    y1: 0,
                    x2: 500,
                    y2: 100,
                    cpx1: 450,
                    cpy1: 0,
                    cpx2: 500,
                    cpy2: 50
                }
            });
            zr.add(curve);

            var ellipse = new Ellipse({
                shape: {
                    cx: 550,
                    cy: 50,
                    rx: 20,
                    ry: 30
                }
            });
            zr.add(ellipse);

            var heart = new Heart({
                shape: {
                    cx: 650,
                    cy: 25,
                    width: 50,
                    height: 60
                }
            });
            zr.add(heart);

            var rose = new Rose({
                shape: {
                    cx: 750,
                    cy: 50,
                    r: [50],
                    k: 0.2,
                    n: 5
                }
            });
            zr.add(rose);

            var trochoid = new Trochoid({
                shape: {
                    cx: 850,
                    cy: 50,
                    r: 30,
                    r0: 5,
                    d: 10
                }
            });
            zr.add(trochoid);

            var isogon = new Isogon({
                shape: {
                    x: 50,
                    y: 150,
                    r: 50,
                    n: 7
                }
            });
            zr.add(isogon);

            var line = new Line({
                shape: {
                    x1: 100,
                    y1: 100,
                    x2: 200,
                    y2: 200
                }
            });
            zr.add(line);

            var polygon = new Polygon({
                shape: {
                    points: [
                        [200, 100],
                        [200, 120],
                        [250, 150],
                        [280, 200],
                        [300, 100]
                    ]
                }
            });
            zr.add(polygon);

            var polyline = new Polyline({
                shape: {
                    points: [
                        [300, 100],
                        [300, 120],
                        [350, 150],
                        [380, 200],
                        [400, 100]
                    ]
                }
            });
            zr.add(polyline);

            var star = new Star({
                shape: {
                    cx: 450,
                    cy: 150,
                    n: 5,
                    r0: 20,
                    r: 50
                }
            });
            zr.add(star);
        }
    );
    </script>
    <div id="main" style="width:1000px;height:800px;"></div>

</body>
</html>