基本图形
撰写时间：2024-07-11
修订时间：2026-03-23
基本图形
基本图形包括：
- 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轴坐标
stroke-dasharray用于指定虚线。
最基本的虚线是由实线长度[, ⎵]虚线长度
的共2个数值的格式构成。如第二行，按实线100px，虚线50px的规律不断循环取值，直至线段结束。
第三行，只有1个数值，则实线长度及虚线长度均为该数值。
第四行，有4个数值，偶数，则依序分配给实线长度及虚线长度。
第五行，有3个数值，奇数，则循环取值后，变成100, 50, 30, 100, 50, 30，变成了偶数，再依序分配给实线长度及虚线长度。
rect
属性：
- x
- X轴坐标
- y
- Y轴坐标
- rx
- 圆角X轴半径
- ry
- 圆角Y轴半径
- width
- 宽度
- height
- 高度
circle
属性：
- cx
- 圆心的X轴坐标
- cy
- 圆心的Y轴坐标
- r
- 半径
使用虚线来填充圆，可生成一些有趣的图形效果。
圆的半径为50px，填充为绿色。描边宽度为80px，则以圆的外框为基准，圆内的描边宽度值为40px，圆外的描边宽度值为40px。
有点小问题。当stroke-dasharray的值为30时，按理来讲应可平分360o的圆周，但为何右边的蓝色块比其他蓝色块要大一些？
stroke-dasharray控制描边的虚实线位置，而描边是一条线段，大多情况下，描边的方向或水平或垂直。但在这里，我们在圆上描边，此时这条描边线段沿着圆的外框弯成了一个圆，则这条线段的长度就是圆周。因此，如果我们希望虚实线能平分整个圆周，将先求出圆的周长，以此周长来分配虚实线。
在console
输出面板中，圆的周长是314.16，取半值为157。将stroke-dasharray的值设为此值，则正好只在圆的下方进行描边。
可修改stroke-dashoffset的值，以让描边区域围着圆心旋转特定角度。同样，此值也以圆的周长为准。若将此值改为157，则蓝色区域旋转到圆的上部，图像变成了一个可爱的草帽人。
将周长157除以5，得31.4，将此值赋值于stroke-dasharray，则可绘制出一个有5片扇叶的小风扇。
下面代码让扇叶无休止地旋转：
当值为52.3时，最好将中间的圆隐藏掉，否则会产生不好的联想。:(
将stroke-dasharray的值修改为不同的值，看能得到什么有趣的效果。唯独不方便的地方是当圆的半径改变时，我们须自己拿出计算器来计算圆的周长。由此催生了在SVG中引用变量的初步研究。
ellipse
属性：
- cx
- 圆心的X轴坐标
- cy
- 圆心的Y轴坐标
- rx
- X轴半径
- ry
- Y轴半径
SVG的ellipse很清爽。若要构建相对复杂的椭圆，可通过变换（transforms）的方式来进行。
polyline
polyline用以绘制非闭合的图形。
属性：
- points
- 各点的坐标值。各点之间以直线相连。值只能为整数或浮点数，不能为百分比。
points属性中的各值可用空格或,
相隔。我的习惯是每个点的X轴、Y轴坐标值用空格隔开，点与点之间用,
隔开。这样在点的数量较多时，可快速定位各个点。
polygon
polygon用以绘制闭合的图形。
属性：
- points
- 各点的坐标值。各点之间以直线相连，且首尾两点相连。值只能为整数或浮点数，不能为百分比。
要制作相对复杂的闭合多边形，实践中可先通过相应的工具类来生成各个顶点，然后再赋值于polygon的points属性。下面代码可用于生成一个正五角形。
Geometries类根植于笛卡尔3D坐标系，因此上面代码中的g将SVG坐标系平移并翻转为笛卡尔坐标系，这样可确保第1个顶点位于时钟面板中12点的位置。
stroke属性
stroke-linecap
stroke-linecap用于指定线条开始及结束时的形状。
butt及square均为平头及平尾，round为圆头及圆尾。
round及square的线条长度一致，而butt的线条长度要短一些。
stroke-linejoin
stroke-linejoin用于指定线条连接点的形状。
miter的连接处很尖锐，round的连接处为圆角，bevel的连接处为圆角的切线。