前端入门：HTML（SVG）

一、预定义的形状元素

矩形：rect 圆形：cicle 椭圆:ellipse 线条:line 多线条：polyline 多边形：polygon 路径：path

1.绘制矩形

案例：

源代码：

 <!-- 矩形 -->

    <svg width="400" height="110">

        <rect width="300" height="100" fill="pink" stroke-width="3" stroke="black"/>

    </svg>

    <br>

    <!-- 设置不透明度 -->

    <svg width="400" height="180">

        <rect x="50" y="20" width="150" height="150" fill="pink" stroke="tomato"

        stroke-width="5" opacity="0.5" />

    </svg>

    <br>

<!-- 圆角矩形 -->

    <svg width="400" height="180">

        <rect x="50" y="20" width="150" height="150" fill="pink" stroke="tomato"

        stroke-width="5" opacity="0.5" rx="20" ry="20"/>

    </svg>

    <br>

2.绘制圆形

案例：

源代码：

<!-- 圆形 -->

    <svg width="100" height="100">

        <circle cx="50" cy="50" r="40" fill="pink" stroke="tomato" stroke-width="3" />

    </svg>

    <br>

3.绘制椭圆形

案例：

源代码：

 <!-- 椭圆形 -->

    <svg width="500" height="140">

        <ellipse cx="200" cy="80" rx="100" ry="50" fill="pink" stroke="tomato" stroke-width="2" />

    </svg>

    <br>

    <!-- 堆叠的椭圆 -->

    <svg width="500" height="150">

        <ellipse cx="240" cy="100" rx="220" ry="30" fill="pink" />

        <ellipse cx="220" cy="70" rx="190" ry="20" fill="yellow" />

        <ellipse cx="210" cy="45" rx="170" ry="15" fill="puple" />

    </svg>

    <br>

    <!-- 视觉上的空心椭圆 -->

    <svg width="500" height="100">

        <ellipse cx="240" cy="50" rx="220" ry="30" fill="pink" />

        <ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />

    </svg>

    <br>

4.绘制线

案例：

源代码：

 <svg width="500" height="210">

        <line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2"> </line>

    </svg>

5.绘制多边形

案例：

源代码：

 <svg width="500" height="210">

        <polygon points="220,10 250,190 160,210" fill="lime" stroke="puple" stroke-width="1"/>

    </svg>

    <br>

    <svg width="500" height="250">

        <polygon points="220,10 300,210 170,250 123,234" fill="lime" stroke="puple" stroke-width="1"/>

    </svg>

    <br>

    <svg width="500" height="210">

        <polygon points="100,10 40,198 198,78 10,78 160,198" fill="lime" stroke="puple" stroke-width="1"/>

    </svg>

    <br>

6.绘制多线条

案例：

源代码：

<svg width="500" height="200">

        <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" fill="none" stroke="black" stroke-width="3"/>

    </svg>

    <br>

    <svg width="500" height="180">

        <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="none" stroke="red" stroke-width="4"/>

    </svg>

    <br>