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

程序员文章站 2022-05-27 08:37:08

...

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:垂直相对长度 在之前图案末尾点的垂直方向长度 正负与坐标轴相同

画弧大小弧以及方向解释图:
svg path绘制弧以及集合之前的绘制方法

代码示例:

<!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="M50 100 L200 200 L200 50 Z M80 30 L50 20 " stroke='blue' fill='none'></path> -->
            <!-- <path d="M50 100 l10 20 m0 0 l10 -20 V200 H300 V300  " fill='none' stroke='blue'></path> -->
            <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>