Svg元素未按要求显示

我在inkscape中创建了几个SVG，并将生成的路径保存到数据库中。当我在屏幕上显示它们时，它们的起始轴似乎不一致

注:

• 水平图片用于显示Y轴的偏移距离
• 垂直图显示X轴偏离的距离
• 为了节省空间，我剪掉了垂直线
• 红色css边框有助于显示起始位置的差异

最初，问题更严重，因此为了解决它，我将所有起始坐标设置为

m10,10

（这使我达到了现在的位置），并注意到我可以手动更改每个以xy坐标开始的字母，以将其放置在我希望的位置，但是，我想试着理解，当我定义了相同的起始位置时，为什么它们不一致

我添加了

preserveSpectratio=“xMinYMin meet”

，并尝试了preserveSpectratio的每个值，但似乎没有任何效果。除此之外（在阅读了一些教程和其他文章之后），我还尝试添加一个额外的名称空间

xmlns:xlink=”http://www.w3.org/1999/xlink“

但这没有效果

我想在视口中心显示所有字母，而不手动更改每个svg起始坐标，可以吗？如果答案是否定的，我需要做什么才能以直线（水平/垂直）显示它们

下面是显示问题的我的链接。使用字符“a”“b”和“q”是因为我认为它们是很好的示例：（注意：我试图将3个svg直接添加到问题中，但超出了允许的字符数）

---

你需要在SVG画布中间放置路径。例如，对于字母A，您可以执行以下操作：

//获取字母A的边界框
设bba=a.getBBox（）
把字母A翻译成SVG画布的中间部分。使用的数字10表示viewBox=“0 20”中的半宽或半高
a、 setAttribute（“transform”，`translate（${-bba.x-bba.width/2+10}，${-bba.y-bba.height/2+10}）`

svg{宽度：100px；轮廓：实心}

你会考虑使用JavaScript吗？我很乐意考虑任何解决方案。但是我觉得我在创建元素的过程中犯了一些错误，我想找出原因，我看到你已经有了javascript的答案。我不认为您对路径做了任何错误，只是您无法控制Inkscape如何准备这些路径。它们总是从
10开始，10
，但哪一点是第一点？左上角？右下角？居中你无法控制。