我希望能够使用svg模式填充多边形，然后将模式填充的结果导出为单独的svg路径/多边形等。
所以我想从这里开始：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="300" height="130">
<defs>
<pattern id="ozmkp" patternUnits="userSpaceOnUse" width="20" height="20">
<path d="M 10, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
</pattern>
</defs>
<rect width="100" height="100" fill="#ff0066" x="20" y="20" style="
fill: url('#ozmkp');
"></rect>
</svg>
然后以这个结尾：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="300" height="130">
<path d="M 20, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 0 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 20 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 40 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 60 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 20, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 40, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 60, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 80, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
<path d="M 100, 80 l 0, 20" stroke-width="1" shape-rendering="crispEdges" stroke="#343434" stroke-linecap="square"></path>
</svg>
是否存在执行此操作的库，或者使用更复杂的模式进行扩展的方法？