为什么我的生成svg文件在Inkscape和(Chrome)浏览器中显示的不同?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么我的生成svg文件在Inkscape和(Chrome)浏览器中显示的不同?相关的知识,希望对你有一定的参考价值。

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

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

enter image description here

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

enter image description here

=>如何确保我的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>
答案

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

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

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

以上是关于为什么我的生成svg文件在Inkscape和(Chrome)浏览器中显示的不同?的主要内容,如果未能解决你的问题,请参考以下文章

将 svg 从 Inkscape 导出到 Corel Draw

如何修复 FabricJS 中 Inkscape SVG 的缩放和旋转?

如何为响应式网页设计准备 Inkscape SVG 文件?

将 JavaScript 生成的 SVG 转换为文件

将 SVG 文本与其他 SVG 对象垂直对齐以使用 Inkscape

SVG 无法在 CentOS 6 中使用 inkscape 正确呈现