svg path绘制弧以及集合之前的绘制方法

淡淡的烟草味﹌ 2021-07-24 13:38 663阅读 0赞

path
    
    <path d=''></path>
      d的值
        可以用','或' '来分割,多个点会默认连接首尾填充颜色
        M:起始坐标点 M坐标点1x 坐标点1y
        L:后续坐标点 L坐标点2x 坐标点2y L坐标点3x 坐标点3y ... 
        H:水平绘制 在上一个坐标点的x坐标和该x坐标连线 H接x坐标(正负与坐标轴方向相同) 若已经用V了,按v后的图案末尾点再水平绘制
        V:垂直绘制 在上一个坐标点的y坐标和该y坐标连线  v接y坐标(正负与坐标轴方向相同) 若已经用H了,按H后的图案末尾点再垂直绘制
        Z:线段闭合 放置位置之前的坐标点会首尾闭合
        C
        S
        Q
        T
        A:画弧线 水平方向半径 竖直方向半径 角度 0小弧/1大弧 0逆时针/1顺时针 终点x坐标 终点y坐标
            其中:
                半径，两个半径相同为圆弧且越小得到的圆弧越多,不同为椭圆弧
                角度为将图形旋转,圆旋转不变,椭圆旋转会改变，方向为起始坐标和终点坐标的连续,正顺负逆
    
            绘制扇形:
                外圈起点坐标和终点坐标y相同
                内圈起点坐标和y相同,且x，y坐标为中心坐标和外圈坐标的和的一半,若为等距圆，中间通过直线命令连接
    
    小写(相对坐标即之前图案末尾点的距离)
        m:在之前图案末尾点为坐标原点后的坐标点
        l:在之前图案末尾点为坐标原点后的坐标点
        h:水平相对长度 在之前图案末尾点的水平方向长度 正负与坐标轴相同
        v:垂直相对长度 在之前图案末尾点的垂直方向长度 正负与坐标轴相同

画弧大小弧以及方向解释图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
    
            <svg  id='svg' width='100%' height='100%'
            xmlns="http://www.w3.org/2000/svg">
    
                
                
                <path d='M100 100 A60 80 20 0 0 200 200'fill='none' stroke='blue'></path>
            </svg>
            
            
        </div>
    
        <script>
    window.onload=function(){ 
    
        //命名空间
        let svgNS="http://www.w3.org/2000/svg";
    
        //获取父级元素
        var div=document.querySelector('.box');
        //获取svg
        let svg=document.querySelector('#svg');
    
        //创建标签
        function createTag(tag,obj){ 
            var oTag=document.createElementNS(svgNS,tag);
            for(var attr in obj){ 
                oTag.setAttribute(attr,obj[attr]);
            }
    
            return oTag;
    
        }
    
    
    
    
    }
    
    
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/89fe43f4c7d14971b36467aafe4150b1.png