为什么SVG在Chrome 51中看到的位置不正确，文字后面的空白增加了呢？
为什么SVG在Chrome 51中看到的位置不正确，文字后面的空白增加了呢？
提问于 2016-07-08 15:53:12
我制作了一个简单的可缩放矢量图形图像(使用Inkscape工具v0.91)。但是，当我在GoogleChrome51中打开文件时，它并没有按应有的方式显示，定位错误的(在一些文本之后增加了一个空白)。我创建了一个简单的示例版本，这里显示左侧的嵌入图像被移除，并在原来的左侧水平文本应该结束的地方添加一行。
原始图像(在编辑器中查看)：
在GoogleChrome51浏览器中查看的图像：
我不明白为什么会发生这种情况，因为浏览器应该以图像描述的相同字体大小和位置绘制图像中的文本，如果缩放被更改，则缩放它们。查看开发人员工具中的元素查看器就会发现，文本没有更小的字体大小属性，并且两个查看器都处于相同的缩放级别。编辑器中显示的图像保存到文件中，在浏览器使用之前不进行修改，所以这肯定是浏览器的问题。即使没有人能找出这个问题的原因，我仍然想要一个解决办法。
下面是一个用于重现问题和测试的示例映像(我早些时候忘记了这一点，并建议这样做)。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>
用户https://stackoverflow.com/users/1462337/rhashimoto的有用答案解释了它如何是字体问题，而不是浏览器或Inkscape问题。文本字体名被设置为sans-serif，它指定一组字体，而不是特定的字体，允许Inkscape在显示时选择不同的字体到Google，从而导致文本尺寸不同。无论是将字体名称设置为"Arial“，还是将文本转换为路径，都解决了问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-07-18 00:45:50
SVG文本元素包含一个font-family属性，其值为sans-serif。此值不指定特定字体，只是选定的字体不应包含衬线。Inkscape和Chrome使用不同的无衬线字体，这些字体产生不同宽度的文本。
看来Inkscape尝试使用DejaVu Sans，如果作为它的无衬线字体存在。在Chrome上，转到chrome://设置/字体，查看我的机器上的sans-serif字体--这是Helvetica。
由于文本布局对您很重要，所以您应该对文本对象进行指定特定字体。例如，您可以将Inkscape中的文本元素更改为显式地具有“font-family of 'DejaVu can”(您也可以在Chrome工具中进行尝试)。然后，生成的SVG应该在Chrome中使用相同的字体，只要Chrome支持目标平台上的字体。
最后一个警告意味着您不应该期望任何任意的、深奥的字体能够在所有浏览器和机器上正确地再现。您可能需要阅读http://nimbupani.com/about-fonts-in-svg.html的“SVG中的字体”部分。
您还可以选择将文本转换为路径。但是，请注意，这会丢失文本内容，因此不能复制到剪贴板、屏幕读取器等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38270865
复制相关文章
相似问题
腾讯云开发者
