<!--
* SVG演示
元素 描述
line 创建一条简单的线。
rect 创建一个矩形。
g
circle 创建一个圆形。
ellipse 创建一个椭圆。
polyline 定义由多个线定义构成的形状。
polygon 创建一个多边形。
path 支持任意路径的定义。
-->
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version='1.1' width="100%" height="1000px" >
<!-- line 元素 创建一条水平线 -->
<!-- <line x1='300' y1="100" x2='400' y2='100' style='stroke:red;stroke-width:10'/> -->
<!-- rect 元素 创建矩形-->
<!-- <rect x="300" y="300" width="300" height="100" style="fill:red"/> -->
<!-- circle 元素 创建一个圆 -->
<!-- <circle cx="300" cy="500" r="40" fill="red"/> -->
<!-- ellipse 元素 椭圆 -->
<!-- <ellipse cx="300" cy="600" rx="100" ry="50" style="fill:red;"/> -->
<!-- polyline 元素 创建多直线楼梯-->
<!-- <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4"/> -->
<!-- 创建不规则的线 -->
<!-- <polyline points="520,20 540,25 560,40 580,120 620,140 700,180" style="fill:white;stroke:red;stroke-width:3"/> -->
<!-- 创建一个星形 -->
<!-- <polygon points="100,210 40,380 190,260 10,260 160,380 100,210" style="fill:red;stroke:black;stroke-width:1"/> -->
<!-- path 元素 创建任意图形 -->
<!-- <path d="M1000,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5"/> -->
<!-- 当命令为大写时，应用绝对位置。当它为小写时，应用相对位置。 -->
<path d="M975,575 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5"/>
<!--
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
rx ry 是椭圆的两个半轴的长度。
x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。
x y 是圆弧终点的坐标。
-->
<path d="M600,900 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 1,0 50,-25 l 50,-25
a25,75 -30 0,0 50,-25 l 50,-25
a25,100 0 1,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5"/>
</svg>
</body>
</html>
05-23
1万+
1万+
10-16
1985
1985
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
