首页 > Web开发 > 详细

svg配合css多变形

时间:2020-08-25 17:06:56      阅读:91      评论:0      收藏:0      [点我收藏+]

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>    

  

svg配合css多变形

原文:https://www.cnblogs.com/huangqiming/p/13560607.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!