基本图形和属性

1. 基本图形

• <rect>
• <circle>
• <ellipse>
• <line>
• <polyline>
• <polygon>

2. 基本属性

• fill
• stroke
• stroke-width
• transform

1、<rect>矩形

2、<circle>圆形

3、<ellipse>椭圆

4、<line>直线

5、<polyline>折线

6、<polygon>多边形

7、基本属性

• fill填充颜色
• stroke描边
• stroke-width描边颜色
• transform变形

示例

<svg xmlns="http://www.w3.org/2000/svg">
    <rect
        x="10"
        y="10"
        rx="5"
        ry="5"
        width="150"
        height="100"
        stroke="red"
        fill="none">
    </rect>

    <circle
        cx="250"
        cy="60"
        r="50"
        stroke="red"
        fill="none">
    </circle>

    <ellipse
        cx="400"
        cy="60"
        rx="70"
        ry="50"
        stroke="red"
        fill="none">
    </ellipse>

    <line
        x1="10"
        y1="120"
        x2="160"
        y2="220"
        stroke="red">
    </line>

    <polyline
        points="250 120
                300 220
                200 220"
        stroke="red"
        fill="none">
    </polyline>

    <polygon
            points="250 120
                300 220
                200 220"
            stroke="red"
            stroke-width="5"
            fill="yellow"
            transform="translate(150 0)">
    </polygon>
</svg>

基本操作

1. 创建图形

• document.createElementNS(ns, tagName)

2. 添加图形

• element.appendChild(childElement)

3. 设置/获取属性

• element.setAttribute(name, value)
• element.getAttribute(name)