svg配合css多变形

1、获取多边形的点（n是几边形，w是宽，h是高）

    const polygon = (n: number, w: number, h: number) => {
        let deg = 2 * Math.PI / n
        let points = []
        for (let i = 0; i < n; ++i) {
            let theta = deg * i
            let x = 0.5 * Math.cos(theta) + 0.5
            let y = 0.5 * Math.sin(theta) + 0.5
            points.push([w * x, h * y])
        }
        return points
    }

2、画svg的path的线（numbers为上述多边形输出的点）

const _resetNumbers = () => {
        let str = ''
        for (let i = 0; i < numbers.length; i++) {
            let salt = 'L'
            if (i === 0) {
                salt = 'M'
            }
            str += salt + ' ' + numbers[i][0] + ' ' + numbers[i][1]
        }
        str += ' Z'
        return str
    }

3、html里呈现

<svg width="100" height="200">
    <path
        d={_resetNumbers()}
        stroke="black"
        fill="transparent"/>
</svg>