上面有很多空间的SVG格式

Question

我正在使用库来从XML文件中生成乐谱音乐，并且我遇到的问题是SVG上方呈现的空间大量空间。

这是指向SVG的链接：https：//gist.github.com/misingnoglic/b6d2035880f413e93ce78551bd9f1d8b#file-svg_page-page-page-html

对不起，这是如此之多，我对SVG文件的了解不足以使问题的最小版本。在Chrome的检查工具中，当我徘徊在整个元素上时，它也突出显示了较大的空间，但是当我研究实际的SVG时，它只突出显示实际的乐谱音乐，而不是实际的SVG。知道我如何解决这个问题？

(当我有您的注意时，有什么办法可以使很长的SVG在网页上更加愉悦？(

Answer 1

SVG是用具有转换作用的G容器元素生成的。这将翻译该元素中的所有内容500像素(x(和向下(y(。

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

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

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

所讨论的代码在您的要点的第44行上。

Answer 2

首先，为了更好地阅读，您可以通过创建文件(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>

您可以根据需要在标签中插入符号。代码示例在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属性的文章，这对我有帮助