Javascript SVG格式，上面有大量空间

我正在使用一个库从XML文件生成乐谱，我遇到了一个问题，即在正在渲染的SVG上方有大量空间

以下是指向SVG的链接：

很抱歉，代码太多了，我对SVG文件的了解还不够，无法对这个问题进行简化。在Chrome的inspect工具中，当我将鼠标悬停在整个元素上时，它也会突出显示较大的空间，但当我查看实际的SVG时，它只突出显示实际的乐谱，而不是实际的SVG。你知道我该怎么解决这个问题吗

---

（还有，当我引起您的注意时，是否有任何方法可以使非常长的SVG在网页上更令人愉快？

生成SVG时使用了一个作用于其上的。这是将该元素中包含的所有内容向右（x）和向下（y）平移500像素

您可以调整此转换的Y值以在页面上上下移动元素及其子元素，即：

<g class="page-margin" transform="translate(500, -1000)">

---

所讨论的代码位于要点的第44行。

首先，为了更好地阅读，您可以通过创建文件（example.svg）将svg与html分开。内部代码应该如下所示：

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="some-symbol" viewBox="0 0 32 32">
            <title>pdfa</title>
            <path class="path1" fill="#fff" d="M10 7v14.1l7 6.6-5 4.3h20v-25z"></path>
            <path class="path2" fill="#fff" d="M9 22v-16h11v-6h-20v20h4v2z"></path>
            <path class="path3" fill="#d92f3b" d="M28.8 17l-0.6-1.8h-2.5l-0.6 1.8h-1.1l2.4-6.5h1.1l2.5 6.5h-1.2zM27.9 14.3l-0.6-1.7c0-0.1-0.1-0.3-0.2-0.6s-0.1-0.4-0.2-0.6c-0.1 0.4-0.2 0.8-0.3 1.2l-0.6 1.7h1.9z"></path>
            <path class="path4" fill="#686565" d="M15.5 13.6c0 0.5-0.2 0.9-0.5 1.2s-0.8 0.4-1.4 0.4h-0.5v1.8h-1.1v-5h1.6c0.6 0 1.1 0.1 1.4 0.4s0.5 0.6 0.5 1.2zM13.1 14.4h0.3c0.3 0 0.6-0.1 0.7-0.2 0.2-0.1 0.2-0.3 0.2-0.6 0-0.2-0.1-0.4-0.2-0.6-0.1-0.1-0.3-0.2-0.6-0.2h-0.5v1.6z"></path>
            <path class="path5" fill="#686565" d="M20.1 14.5c0 0.8-0.2 1.5-0.7 1.9s-1.1 0.7-2 0.7h-1.4v-5h1.6c0.8 0 1.4 0.2 1.9 0.6 0.4 0.4 0.6 1 0.6 1.8zM19 14.5c0-1.1-0.5-1.6-1.4-1.6h-0.6v3.3h0.5c1-0.1 1.5-0.6 1.5-1.7z"></path>
            <path class="path6" fill="#686565" d="M22 17h-1v-5h3v0.9h-2v1.3h2v0.8h-2v2z"></path>
            <path class="path7" fill="#808080" d="M19 6h1v-6h-20v20h1v-19h18z"></path>
            <path class="path8" fill="#4e82b8" d="M3 21c0 0 0 2.6 0 2.9s0.1 0.5 0.2 0.8c0.1 0.3 0.3 0.6 0.5 0.8 0.3 0.3 0.6 0.5 0.9 0.7s0.6 0.3 1 0.3h4.8l-3.4-3.5h2.9l5.1 4.7-5.1 4.3h-2.9l3.4-3.4h-5c-0.6 0-1.2-0.1-1.7-0.4-0.5-0.2-1-0.6-1.4-1s-0.7-0.9-1-1.4c-0.2-0.6-0.3-1.1-0.3-1.8 0-0.3 0-3 0-3h2z"></path>
            <path class="path9" fill="#7f7f7f" d="M10 7v14h1v-13h20v13h1v-14z"></path>
            <path class="path10" fill="#faab43" d="M28 21l-3 3h-8l-3-3h-4v0.1l7 6.6-5 4.3h20v-11h-4zM25 29h-7v-2h1v1h5v-1h1v2z"></path>
            <path class="path11" fill="#ea2f43" d="M9 7.3c-0.1 0-0.2 0.1-0.2 0.1-0.3 0.2-0.4 0.4-0.4 0.7s0.1 0.6 0.4 0.7c0 0.1 0.1 0.1 0.2 0.2v-1.7z"></path>
            <path class="path12" fill="#ea2f43" d="M7.7 9.8c-0.4-0.3-0.7-0.8-0.7-1.6 0-0.7 0.3-1.2 0.8-1.6s1.1-0.6 1.8-0.6v0h8.4v-4h-16v16h7v-4.1c-0.8-0.2-1.6-0.5-2.3-1.2l0.8-1c0.5 0.4 1 0.7 1.5 0.8v-2.2c-0.2-0.1-0.4-0.1-0.5-0.2-0.3 0.1-0.6-0.1-0.8-0.3z"></path>
        </symbol>
    </defs>
</svg>

pdfa

您可以在标记中插入任意数量的符号。在html页面上显示的代码示例：

<svg class="icon-svg default">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="example.svg#some-symbol"></use>
</svg>

关于顶部的边距。您应该添加到svg标记的viewBox属性中。他包含四个变量：顶部绘制坐标、左侧绘制坐标、svg宽度和svg高度

<svg width="17761" viewBox="0 100 17761 752" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">

另外，我为你们提供了固定的顶部边距，但若你们愿意，你们可以在viewBox中用100数字播放更多的内容，然后做任何你们想做的事情。

---

关于对我有帮助的viewBox属性

谢谢！如果我不能修改SVG本身（我有很多是由我无法控制的脚本自动生成的），有没有办法在SVG之外修改g容器元素？

<svg width="17761" viewBox="0 100 17761 752" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">