入门

矩形#

Live Editor

<svg width="800px" height="300px">
    <rect
        width="30px"
        height="30px"
        fill="red"
        stroke="#000"
        stroke-width='1px'
    />
</svg>

<svg width="800px" height="300px">
    <rect
        width="30px"
        height="30px"
        fill="red"
        stroke="#000"
        stroke-width='1px'
    />
</svg>

Result

线段#

Live Editor

<svg width="800px" height="300px">
    <line
        x1="100"
        y1="100"
        x2="250"
        y2="75"
        stroke="blue"
        stroke-width='1'
    />
    <line
        x1="250"
        y1="75"
        x2='300'
        y2="100"
        stroke="blue"
        stroke-width='1'
    />
</svg>

<svg width="800px" height="300px">
    <line
        x1="100"
        y1="100"
        x2="250"
        y2="75"
        stroke="blue"
        stroke-width='1'
    />
    <line
        x1="250"
        y1="75"
        x2='300'
        y2="100"
        stroke="blue"
        stroke-width='1'
    />
</svg>

Result

圆形#

Live Editor

<svg width="800px" height="300px">
    <circle 
        cx="200"
        cy="200"
        r="50"
        fill="red"
        stroke="blue"
        stroke-width="2"
    />
</svg>

<svg width="800px" height="300px">
    <circle 
        cx="200"
        cy="200"
        r="50"
        fill="red"
        stroke="blue"
        stroke-width="2"
    />
</svg>

Result

path#

Live Editor

<svg width="800px" height="300px">
    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

<svg width="800px" height="300px">
    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
</svg>

Result