确定整体卦象比例特征

先确定整体卦象的比例：

对于需要绘制八卦卦象的任意一个svg，我们希望在一个正方形内绘制。因此在CSS中，将svg的宽高比设置为1 : 1。这样，只需调节svg的width或height属性值，整个图形将自动按比例缩放，从而可以按比例绘制任意大小的周易图像。

而对于绘制阴阳爻内容的区域，出于视觉美观的需求，需限定在一个黄金矩形的区域内（上面以淡淡的灰色边框显示）。因此svg的viewBox属性值的宽高比为0.618 : 1，且内容区域居中。

而在内容区域内，每个代表阳爻的line的宽度为黄金矩形的宽度值，高度值则通过CSS设置为12%，并通过它们的y1, y2属性值在25%, 50%及75%的位置分别绘制了3个阳爻。

使用line元素，只要指定了其stroke-width属性值，则即可在指定的Y轴坐标值上居中绘制。

整体图形出来了，但有以下几点不足：

1. 直接在svg上将viewBox的值设置黄金分割比例，限制了整个svg的综合使用。
2. line元素虽方便定位，但只能设置其stroke的描边颜色值，不能设置其fill填充颜色值。毕竟，它只是一条没有填充区域的直线而已。
3. 重复3次使用line元素，意味着需要将其重构为可重复使用的机制。例如，应改为使用symbol。

使用symbol

下面将其重构为使用symbol来绘制。

定义了一个id值为yang-yao的symbol。取消了svg的viewBox的设置，转到在symbol上设置。

在symbol中改用rect，则可以自由指定填充颜色及描边颜色。

symbol的子元素rect的width及height属性值可自由地通过使用百分比的方式来达到自动按黄金分割比例缩放的效果。

使用rect作为symbol的子元素的问题是，rect不像line元素可在Y轴坐标值为25%, 50%及75%等位置上自动居中定位。

要解决此问题，有3种方案。

第一种方案是在定义symbol时，将y值设置为-6%，以将其往上推移阳爻高度值的一半。但问题是落在视口区域外的图形将被自动裁剪。因此这种方案行不通。

第二种方案是通过使用SVG 2.0中symbol的refX及refY属性来定义引用位置，但Chrome及Safari目前不支持此特性。

因此，只能使用第三种方案，即设置use元素的CSS的transform属性值，将它们在Y轴上均往上平移-6%的位移。

这里有个细节问题需注意，可在use元素上设置其transform属性，但值只能为整数或浮点数，不能为百分比。而CSS的transform中translate函数可支持百分比。

确定比例

带文本及不带文本的区别仅在于在内容器中是否多出一个p元素，而在外容器中通过设置：

则足以充分应对这两种情况。因此两种元素仅需一个CSS选择器即可。

六十四卦的整体排版

64个卦象，数量较多，因此最好使用JavaScript来自动生成各个卦象。其必要的HTML模板结构如下：

在负责排版的容器中通过引用另一个类有文本，让用户自由选择。

因为六十四卦的内容及顺序又是固定的，则HTML代码又可简化为：

剩下的任务就完全交由JavaScript代劳了。

如果希望每行放8个卦，且又须保持卦的最小宽度值，则可将模板列指定为固定的列数，且若一行的水平空间不够时，需在容器上建立滚动容器：

效果如下：