学习 SVG:基础

  1. svg 标签
    • xmlns
    • viewBox
  2. 形状
    • 矩形 rect
    • 圆形 circle
    • 椭圆 ellipse
    • 线条 line
    • 多边形 polygon
    • 折线 polyline
    • 路径 path
  3. 通用属性
    • stroke: 边框颜色
    • stroke-width: 边框宽度
    • fill: 填充颜色
    • style
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="background-color:beige;width:800px;margin:0 auto;">
    <svg id="example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
        <!--

        -->
        <rect x="0" y="0" width="100%" height="100%" fill="none" stroke='rgb(99,99,99)' stroke-width='2' />
        <line x1="800" y1="0" x2="0" y2="800" style="stroke:rgb(99,99,99);stroke-width:2" />
        <line x1="0" y1="0" x2="800" y2="800" style="stroke:rgb(99,99,99);stroke-width:2" />

        <circle cx="400" cy="400" r="100" />
        <ellipse cx="400" cy="150" rx="120" ry="60" />

        <polygon points="250,300 130,520 50,350" />
        <polygon points="80,40 120,60 80,80 60,120 40,80 0,60 40,40 60,0 80,40"/>

        <polyline points="150,750 170,800 190,750 210,800 230,750" fill='none' stroke='rgb(99,99,99)' stroke-width='2' />

        <rect x="550" y="325" width="200" height="150" />

        <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" x="400" y="600" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#000000">@</text>

        <!--
            http://editor.method.ac/#move_front
            M = moveto
            L = lineto
            H = horizontal lineto
            V = vertical lineto
            C = curveto
            S = smooth curveto
            Q = quadratic Belzier curve
            T = smooth quadratic Belzier curveto
            A = elliptical Arc
            Z = closepath
        -->
        <path d="m395.5,698c0,0 1,0 4,0c4,0 8.29361,2.7265 12,7c3.276,3.77728 6.54135,7.7027 8,11c1.66803,3.77063 1.79395,8.08746 4,13c1.83203,4.07965 3,6 3,8c0,2 0,3 0,5c0,2 0.70709,3.29291 0,4c-0.70709,0.70709 -3,1 -4,1c-1,0 -3,0 -4,0c-1,0 -3,0 -4,0c-1,0 -2,0 -3,0c-1,0 -2.186,0.30743 -4,-1c-1.14728,-0.8269 -2,-2 -2,-3c0,-1 -0.22977,-3.02673 0,-4c0.51373,-2.17627 2.07339,-2.93164 3,-4c3.276,-3.77728 6,-7 9,-10c3,-3 4.79489,-5.22021 8,-8c3.77728,-3.276 6.21167,-5.71411 9,-8c2.18735,-1.79321 4.186,-2.69257 6,-4c2.29453,-1.65381 3,-2 4,-2l1,0l2,-1l1,0" fill-opacity="null" stroke-opacity="null" stroke-width="2" stroke="#000" fill="none"/>
    </svg>
</body>
</html>