（1）使用svg创建网格背景

实现思路：在一个200 * 200px的svg画布中绘制网格背景，先绘制10*10px的网格图案，定义在svg的pattern标签，通过引用定义好的pattern标签来填充画布

实现步骤：
1、先绘制10*10px的网格的上边框和左边框

<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>

2、在pattern标签中定义好10*10px的网格图案，然后在画布中填充。

<template>
    <svg width="200px" height="200px">
        <defs>
            <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#smallGrid)" />
    </svg>
</template>

是 SVG 的图案填充标签，可以在 pattern 中定义好图案，然后通过 id 引用来对某个图形进行填充。
元素用于嵌入可在SVG映像内重用的定义。使用SVG 元素, 可以将SVG形状组合在一起, 并将其作为单个形状重复使用

3、在用网格作为背景绘制svg图案时，为了更方便的找到绘制的坐标点，网格按100*100px绘制再填充。

<template>
    <svg width="200px" height="200px">
        <defs>
            <!-- 绘制10*10px的小网格 -->
            <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" stroke-width="0.5"/>
            </pattern>
            <!-- 绘制100*100px的网格 -->
            <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
                <rect width="100" height="100" fill="url(#smallGrid)"/>
                <path d="M 100 0 L 0 0 0 100" fill="none" stroke="gray" stroke-width="0.5"/>
            </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
    </svg>
</template>

4、当然这样会发现，在200px*200px的画布填充时，网格最后的右边框和下边框缺失，有两种解决方式：

修改样式，在最外层的svg画布的宽度、高度上加1像素，使其多填充1像素

<template>
    <!-- 最外层的svg画布的宽度、高度上加1像素，使其多填充1像素 -->
    <svg width="201px" height="201px">
        <defs>
           ...
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
    </svg>
</template>

给最外层svg加上右边框和下边框

<svg width="200px" height="200px" class="svg-wrap">
     ...
</svg>
<style scoped>
.svg-wrap {
    /*给最外层svg加上右边框和下边框*/
    border-right: 0.5px solid gray;
    border-bottom: 0.5px solid gray;
}
</style>