绘制SVG

该组件是一个svg的js操作api，可使用api绘制svg图形。

示例

    let svg = new Svg.default({width: 900, height: 900});

    {
        svg.exec('line 10,10 30,10 --border 1 #000000');
        // svg.line({x: 10, y: 10}, {x: 30, y: 10}, {width: 1, color: '#000000'});
        svg.exec('sector 100,450 50 0 360 #EEEEEE 20');
        svg.exec('sector 200,200 50 90 240 green');
    
        svg.exec('sector 200,200 100 0 120 #446688 20 --attr id id1');
        svg.exec('sector 200,200 100 120 240 #887731 20 --attr id id2');
        svg.exec('sector 200,200 100 240 360 #431a88 20 --attr id id3');
    
        svg.exec("text '一号' id1 #000000 --offset 100 15");
        svg.exec("text '二号' id2 #000000 --offset 100 15");
        svg.exec("text '三号' id3 #000000 --offset 100 15");
    
        // 绘制一个圆环
        svg.exec('circle 300,600 100 --fill #FFF --border 20 #000');
        svg.exec('triangle 400,200 200,400 500,500 --fill red');
    }
    
    // 小红心
    /*********************如下示例可以用于转换iconfont的svg图形*************************/
    svg.symbol('symbol', {
        viewBox: '0 0 1024 1024',
        content: `<path d="M32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512L562.592 892.8a96 96 0 0 1-124.416-1.952l-308.16-270.688A278.976 278.976 0 0 1 32 407.584z"></path>`
    });
    svg.use({x: 450, y: 600}, 'symbol', {width: 16, height: 16}).attr("fill", 'red');
    
    /*********************如下示例可以用于转换iconfont的svg图形*************************/
    
    // 小箭头
    /*********************如下示例可以用于转换iconfont的svg图形*************************/
    svg.symbol('symbol1', {
        viewBox: '0 0 1024 1024',
        content: `<g style="transform-origin: center;transform: rotate(90deg)"><path d="M325.456896 862.27968"></path>
          <path d="M882.05824 862.27968"></path>
          <path d="M-6.144 885.609472"></path>
          <path d="M935.424 958.323712 938.068992 956.217344 938.068992 784.970752 666.698752 510.976 938.068992 236.988416 938.068992 66.264064 935.424 63.634432 491.774976 510.976Z"></path>
          <path style="transform: translateX(140px)" d="M529.712128 958.323712 532.33664 956.217344 532.33664 784.970752 260.461568 510.976 532.33664 236.988416 532.33664 66.264064 529.712128 63.634432 86.064128 510.976Z" data-spm-anchor-id="a313x.7781069.0.i6" class="selected"></path>
          <path d="M1029.73952 885.609472"></path></g>`
    }).css('transform-origin', 'center').css('transform', 'rotate(90deg)')
    svg.use({x:500, y:400}, 'symbol1', {width: 64, height: 64}).attr("fill", 'red');
    
    /*********************如下示例可以用于转换iconfont的svg图形*************************/
    
    svg.coordinate({x: 500, y: 20}, 350, -250, 'red');
    
    svg.text({x:510, y:40}, '你怕是个沙子哦', {size: 12, color: 'red'}).vertical()
    
    svg.text({x:900, y:40}, '我觉得公司的管理制度（人事、财务、信息安全、工作规范等）能帮助我有效地工作。', {size: 12, color: 'red'}).vertical(2)
    
    svg.text({x:930, y:140}, '公司提供的各种工具和资源（如: IT系统、办公设备等）使我有效地完成工作。', {size: 12, color: 'red'}).vertical(2)
    
    svg.rect({x:530, y:40}, 300, 200, {color: '#000000'}).radius(20)
    
    svg.star({x: 560, y: 600}, 31, 80).fill('#000000');
    svg.symbol('symbolStar', {
        viewBox: '0 0 256 256',
        content: new Star({
            size: 5,
            minR: 31,
            maxR: 80,
            o: {x: 128, y: 128}
        })
    });
    svg.use({x: 660, y: 480}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 680, y: 510}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 700, y: 540}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 680, y: 570}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 660, y: 630}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 630, y: 600}, 'symbolStar', {width: 32, height: 32}).fill('red');
    svg.use({x: 690, y: 600}, 'symbolStar', {width: 32, height: 32}).fill('red');
    
    svg.pie({x: 690, y: 350}, 50,
        [
            {color: 'gray', value: 10, name: 'p1'},
            {color: 'green', value: 30, name: 'p2'},
            {color: 'orange', value: 60, name: 'p3'}
        ],
        {
            width: 50,
            attrs: {
                'stroke': '#FFFFFF',
                'stroke-width': 2
            },
            font: {
                color: '#443dc0'
            }
        }
    )

    document.body.append(svg.element)

Sector

画圆或者扇形 或者圆环

Circle

画圆形

Circle#paint

批量画圆

Circle#getPoint

已知圆心半径 以及角度 获取圆上面的一个点 以垂直方向角度为0

Ellipse

椭圆

Line

连线

Polygon

多边形

Polygon#acme

绘制多边形顶点

Polygon#score

根据分值绘制多边形

Triangle

三角形

Triangle#equilateral

正等边三角形

Triangle#regular

绘制一个特殊的正三角形（不一定等边）

Rectangle

矩形 包含正方形跟长方形

Path

svg 路径（path）操作

Text

文本绘制

Pie

饼图绘制

Link

超链接