SVG字体的问题导致元素定位相同显示位置不同

744 阅读1分钟

问题:

同样一个SVG文件,同一个元素一毛一样,直接用浏览器打开和通过embed嵌入系统后展示,呈现效果就是不同,元素位置存在偏差。

<text font-size="21px" fill="#000000" x="1552.0" y="616.0" dy="1em" font-weight="400">111.110.111.132</text>

如图所示:

请添加图片描述

(直接打开图)

请添加图片描述

(embed嵌入图)

元素一模一样,但是显示位置就是不同。

纠结了半天,结果是因为嵌入系统的,因为字体不一样,导致的错位!!!

系统中设置了字体样式:

font-family: Verdana, Arial, Helvetica, sans-serif, serif, 'Microsoft YaHei', Avenir, cursive, fantasy, monospace;

而原始的SVG文件没有设置字体,只需对SVG定义文字样式如下即可:

font-family: Arial, Helvetica, sans-serif;

但是浏览器打开默认的啥字体啊?建议系统设置啥字体呢?