基本图形
撰写时间：2024-07-11
修订时间：2024-07-11
基本图形
基本图形包括：
- line
- rect
- circle
- ellipse
- polyline
- polygon
路径，基本图形，以及文本元素，均可通过fill（填充）及stroke（描边）属性被渲染出来。
基本图形均有以下属性：
- fill
- fill-opacity
- fill-rule
- marker
- marker-end, marker-mid, marker-start
- paint-order
- shape-rendering
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
line
属性：
- x1
- 起点的X轴坐标
- y1
- 起点的Y轴坐标
- x2
- 终点的X轴坐标
- y2
- 终点的Y轴坐标
rect
属性：
- x
- X轴坐标
- y
- Y轴坐标
- rx
- 圆角X轴半径
- ry
- 圆角Y轴半径
- width
- 宽度
- height
- 高度
circle
属性：
- cx
- 圆心的X轴坐标
- cy
- 圆心的Y轴坐标
- r
- 半径
ellipse
属性：
- cx
- 圆心的X轴坐标
- cy
- 圆心的Y轴坐标
- rx
- X轴半径
- ry
- Y轴半径
SVG的ellipse很清爽。若要构建相对复杂的椭圆，可通过变换（transforms）的方式来进行。
polyline
属性：
- points
- 各点的坐标值
points属性中的各值可用空格或,
相隔。我的习惯是每个点的X轴、Y轴坐标值用空格隔开，点与点之间用,
隔开。这样在点的数量较多时，可快速定位各个点。
polygon
属性：
- points
- 各点的坐标值
polygon用以绘制闭合的图形。