第24页
显然我们得到了一个宽度和高度均为100的画布，不过这个画布是空白的。现在，我们准备好下笔进行创作了。
绘制一个基本形状
我们可以试试往其中加一些形状，比如圆形。
由于我们没有对圆进行任何具体定义，所以上述SVG代码还不可见任何内容。一个圆形需要定义其圆心和半径，这时注意圆形的圆心不能被写成(x,y)，而是 (cx,cy)，你可以认为是“circle的x和circle的y”。
检查闭合情况和单词拼写，如果不出意外，那你的浏览器中应该出现了一个黑色的圆。
至此，已经成功了一大步，你可以通过手写SVG构建出一个图形了。不过这个圆形有一些丑陋，你可能希望它有独特的填充色、描边色等参数，所以请进一步扩写，比如把填充色（Fill）设定为红色。
我们可以在HTML5中直接写入颜色的英文名。当然这里仅作示范，因为更多时候我们选择RGB书写方式。
或者如下书写方式。
现在你应该有更多自信对这个圆进行进一步修饰了。
在上述代码中，我们增加了描边色（Stroke）和描边宽度（Stroke-width）。而圆中的全部参数（cx="50" cy="50" r="30" fill="#ff0000" stroke="yellow" stroke-width="10"）并不具有排序的唯一性。如果你像以下这样打乱顺序，则效果依然是可行的。
现在请对照一下你写出的内容效果（如图3-10所示）。
图3-10 你的内容效果
同样，我们也可以构建一个矩形。不过这次我们把SVG画布的宽度设置为100%，这意味着画布的宽度将自动以显示器宽度为准。
对于矩形我们除了要定义宽和高以外，还需要定义它的定点。对于矩形来说，它的定点指左上角定点的坐标位置。
同样，我们尝试对这个矩形增加更多的样式。因为这次样式内容更多一些，所以要介绍针对样式的另一种书写方式。
所以在style中，填充色、描边色、描边宽度、描边透明度（Opacity）可以写作A:B;C:D的转化形式，即原先的等于号变成了冒号，而元素和元素之间，使用分号隔开。另外，我们还观察到对代码而言，.5 这样的位数写法是完全可行的，计算机会将其识别为0.5。现在请对照一下你写出的内容效果（如图3-11所示）。
图3-11 增加样式后的内容效果
其实上述的书写方式也展现了CSS盒模型式的思维逻辑。各位运营者应该记住，全端代码并非是逐行按顺序写成的，而是按照嵌套的顺序书写的。
绘制更多基本形状
反复练习基本形状的书写，有利于你不断提升对SVG代码的熟悉程度，以下是供你对照书写的更多案例。为了便于印刷和识别，笔者对元素进行了换行排列，但不影响效果。另外，图形闭合使用了/>缩略写法，注意在135编辑器中不支持这种调试方式，但是如果用Chrome开发者则可以被自动识别并载入微信图文中。
y="20"
rx="10"
ry="10"
width="300"
height="150"
style="fill:red;stroke:red;stroke-width:5px;stroke-opacity:.5;"
/>
cx="150"
cy="100"
rx="90"
ry="50"
stroke="red"
stroke-width="5"
fill="#CFCFCF"
fill-opacity=".6"
/>
y1="0"
x2="250"
y2="200"
style="stroke:rgba(255,0,0,.5);stroke-width:5px;"
/>
stroke="red"
stroke-width="5"
stroke-opacity=".5"
fill="rgba(250,0,0,.3)"
/>