基础学习

矩形

    <svg width="100%" height="100%">
      <rect
        x="20"
        y="20"
        width="100"
        height="100"
        rx="10"
        ry="10"
        style="fill:red;stroke:blue;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.7;"
      />
    </svg>

    <svg width="100%" height="100%">
      <rect
        x="20"
        y="20"
        width="100"
        height="100"
        rx="10"
        ry="10"
        fill="red"
        stroke="blue"
        stroke-width="5"
        fill-opacity="0.5"
        stroke-opacity="0.7"
      />
    </svg>

    <svg width="100%" height="100%">
      <rect
        style="
        fill:red;
        stroke:blue;
        stroke-width:5;
        fill-opacity:0.5;
        stroke-opacity:0.7;
        width:100;
        height:100;
        rx:10;
        ry:10;
        x:100;
        y:100;"
      />
    </svg>

属性	功能
x	横向偏移量
width	宽
height	高
rx	圆角
ry	圆角
fill	背景色
stroke	边框颜色
stroke-width	边框宽度
fill-opacity	背景透明度
stroke-opacity	边框透明度
opacity	背景、边框透明度

圆

    <svg width="100%" height="100%">
      <circle
        cx="100"
        cy="50"
        r="40"
        stroke="black"
        stroke-width="2"
        fill="red"
      />
    </svg>

属性	功能
cx	x坐标
cy	y坐标
r	半径
fill	背景色
stroke	边框颜色
stroke-width	边框宽度

椭圆

      <ellipse
        cx="500"
        cy="150"
        rx="200"
        ry="80"
        style="fill:rgb(200,100,50);stroke:rgb(0,0,100);stroke-width:2"
      />

属性	功能
cx	x坐标
cy	y坐标
rx	水平半径
ry	垂直半径

直线

    <svg width="100%" height="100%">
      <line
        x1="0"
        y1="0"
        x2="300"
        y2="300"
        style="stroke:rgb(99,99,99);stroke-width:2"
      />
    </svg>

属性	功能
x1	起点x轴坐标
y1	起点y轴坐标
x2	起点x轴坐标
y2	起点y轴坐标

多边形

    <svg width="100%" height="100%">
      <polygon
        points="220,100 300,210 170,250"
        style="fill:#cccccc;stroke:#000000;stroke-width:1"
      />
    </svg>

折线

    <svg width="100%" height="100%">
      <polyline
        points="0,0 0,20 20,20 20,40 40,40 40,60"
        style="fill:white;stroke:red;stroke-width:2"
      />
    </svg>