我为折线创建了一个svg，两端有两个圆圈，如下所示：
<svg width="42px" height="42px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<g>
<circle cx="21px" cy="21px" r="21px" fill="black"/>
<g>
<polyline points="20 30 15 20 25 15 20 7" stroke="white" stroke-width="2"/>
<circle cx="20" cy="30" r="2.2" fill="white" stroke="white"/>
<circle cx="20" cy="7" r="2.2" fill="white" stroke="white"/>
</g>
</g>
</svg>
我希望重复使用折线和圆圈：
<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" version="1.1">
<g transform translate=(-30,-30)>
<polyline points="20 30 15 20 25 15 20 7" stroke="white" stroke-width="2"/>
<circle cx="20" cy="30" r="2.2" fill="white" stroke="white"/>
<circle cx="20" cy="7" r="2.2" fill="white" stroke="white"/>
</g>
</svg>
然而，点的坐标位于30，依此类推。如何修改此svg以获得可重用性。在指定svg图像时我应该使用哪些单位。