为什么在 Chrome 51 中查看的 SVG 无法正确定位并在文本后添加间隙？
我制作了一个简单的可缩放矢量图形图像（使用 Inkscape 工具 v0.91）。编辑器显示一切正常，但是当我在 Google Chrome 51 中打开文件时，它没有按应有的方式显示，定位错误（某些文本后增加了间隙）。我创建了一个更简单的示例版本，如下所示，其中删除了左侧的嵌入图像，并在原始文本中添加了一行，其中左侧的水平文本应结束。
原图（在编辑器中查看）：
在Google Chrome 51浏览器中查看的图像：
我不明白为什么会发生这种情况，因为浏览器应该以与图像描述相同的字体大小和位置绘制图像中的文本，如果缩放发生变化则缩放它们。查看开发人员工具中的元素查看器可以确认文本没有较小的字体大小属性，并且两个查看器都处于相同的缩放级别。编辑器中显示的图像被保存到文件中，并且在被浏览器使用之前没有被修改，所以这肯定是浏览器的问题。即使没有人能找到这个问题的原因，我仍然想要一个解决方案。
这是一个示例图像，用于重现问题并进行测试（我之前忘记了这一点，建议这样做）。SVG 图像主机服务器似乎很少见，因此我将其添加为代码片段，但可以将其复制回具有.svg扩展名的文件中，以便在浏览器中正常查看。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="135.972"
height="40"
viewBox="0 0 135.97202 39.999998"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="test.svg"
inkscape:export-filename="C:\blah\logo.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<defs
id="defs4">
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker4688"
refX="0"
refY="0"
orient="auto"
inkscape:stockid="Arrow1Send">
<path
transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
id="path4690"
inkscape:connector-curvature="0" />
</marker>
<linearGradient
osb:paint="gradient"
id="linearGradient9980">
<stop
id="stop9982"
offset="0"
style="stop-color:#000000;stop-opacity:1;" />
<stop
id="stop9984"
offset="1"
style="stop-color:#000000;stop-opacity:0;" />
</linearGradient>
<marker
inkscape:stockid="Arrow1Send"
orient="auto"
refY="0"
refX="0"
id="marker4688-8"
style="overflow:visible"
inkscape:isstock="true">
<path
inkscape:connector-curvature="0"
id="path4690-0"
d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
transform="matrix(-0.2,0,0,-0.2,-1.2,0)" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible;"
id="marker4688-5"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Send">
<path
transform="scale(0.2) rotate(180) translate(6,0)"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#a5a5a5;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path4690-1" />
</marker>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="2"
inkscape:cx="41.427915"
inkscape:cy="11.725916"
inkscape:document-units="px"
inkscape:current-layer="svg2"
showgrid="false"
units="px"
inkscape:window-width="961"
inkscape:window-height="601"
inkscape:window-x="336"
inkscape:window-y="51"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:showpageshadow="false"
showborder="true"
borderlayer="false" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="23.658821"
y="16.700916"
id="text4409"
sodipodi:linespacing="94.999999%"><tspan
sodipodi:role="line"
x="23.658821"
y="16.700916"
id="tspan4413"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"><tspan
rotate="0 0 0 0 0 0 0 0 0 0"
id="tspan4465"
style="font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold Italic';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">Text that</tspan></tspan><tspan
sodipodi:role="line"
x="23.658821"
y="32.13842"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"
dx="0 0 0 0 0 0 0 0 0 0 10"
dy="0 0 0 0 0 0 0 0 0 0 0"
id="tspan4473"><tspan
id="tspan4475"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">gets moved</tspan></tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#0050a0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="133.1541"
y="7.5629053"
id="text4409-4"
sodipodi:linespacing="70.999998%"
transform="scale(0.99999351,1.0000065)"><tspan
sodipodi:role="line"
x="133.1541"
y="7.5629053"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4473-1">t</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="11.79909"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4231">e</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="16.114841"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4233">s</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="21.423279"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:89.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4235">t</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="26.799091"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4237">i</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="31.114843"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
id="tspan4239">n</tspan><tspan
sodipodi:role="line"
x="133.1541"
y="35.476368"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
rotate="0 0"
dy="0 0"
dx="0 10.000066"
id="tspan4241">g</tspan></text>
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 129.69402,1.1636744e-6 0,39.9999998363256"
id="path4340"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
</svg>用户@rhashimoto的有用答案解释了这是一个字体问题，而不是浏览器或 Inkscape 问题。文本字体名称设置为
sans-serif指定一组字体而不是特定字体，这使得 Inkscape 在显示时选择与 Google Chrome 不同的字体，导致文本尺寸不同。将字体名称设置为“Arial”并将文本转换为路径都解决了问题。
您的 SVG 文本元素包含一个font-family值为 的属性sans-serif。该值不指定特定字体，只是指定所选字体不应包含衬线。Inkscape 和 Chrome 使用不同的无衬线字体，这些字体产生不同宽度的文本。
Inkscape似乎尝试使用 DejaVu Sans（如果其无衬线字体）。在 Chrome 上，转到 chrome://settings/fonts 查看 sans-serif 字体 - 在我的机器上它是 Helvetica。
由于文本布局对您很重要，因此您应该为文本对象分配特定的字体。例如，您可以将 Inkscape 中的文本元素更改为明确具有font-family“DejaVu Sans”（您也可以在 Chrome 开发人员工具中尝试）。然后，只要 Chrome 在您的目标平台上支持该字体，生成的 SVG 就应该在 Chrome 中使用相同的字体。
最后一个警告意味着您不应期望任何任意深奥的字体都能在所有浏览器和机器上正确再现。您可能需要阅读http://nimbupani.com/about-fonts-in-svg.html的“SVG 中的字体”部分。
您还可以选择将文本转换为路径。但请注意，这会丢失文本内容，因此无法将其复制到剪贴板、由屏幕阅读器读取等。