为什么我的生成svg文件在Inkscape和（Chrome）浏览器中显示的不同？

Question

我以编程方式生成了如下所示的svg内容。

如果使用浏览器（Chrome 77.0.3865.75或Firefox 68.1.0esr（64位）打开），则轴标“ z”和“ y”将显示在预期位置：

但是，如果我在Inkscape（0.92.4）中将其打开，则轴标签将显示在左上角。的刻度标签也移到错误的位置。

=>如何确保我的svg文件可同时用于浏览器和Inkscape？

在Inkcape中打开，z标签的坐标为appr。 x = 90，y = 548。如果将标签移动到希望的位置，则新坐标为apprc。 x = 290，y = 50。

可能是浏览器和Inkscape使用不同的默认单位或参考点吗？还是我必须为Inkcape包括某种其他标头才能正确呈现文件？

<svg xmlns="http://www.w3.org/2000/svg" class="treez-svg" id="treez-svg" width="15cm" height="15cm"><g id="page" display="inline"><rect fill="#ffffff" width="15cm" height="15cm"/><g id="graph" transform="translate(94.48818897637794,18.89763779527559)" display="inline"><rect width="12cm" height="12cm" fill="#ffffff" fill-opacity="1" stroke="#000000" stroke-width="2" stroke-dasharray="none" stroke-opacity="1"/><g class="axis" id="x" display="inline"><g id="primary" class="primary" transform="translate(0,453.54330708661416)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(226.77165354330708,508.54330708661416),rotate(0)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">z</text></g></g><g class="axis" id="y" display="inline"><g id="primary" class="primary" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" transform="translate(453.54330708661416,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(-82,226.77165354330708),rotate(-90)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">y</text></g></g></g></g></svg>

Answer 1

您的SVG在Firefox中的解释与在Inkscape中的解释不同。具体来说，Inkscape似乎忽略了转换属性，在两个不同的指令之间（例如旋转，翻译等）之间存在逗号。

我不确定这是否是Inkscape中的错误，或者Firefox是否在那里特别容错。

如果您搜索并替换'），r'并将其替换为'）r'，则可以修复它。