【发布时间】：2019-03-25 21:51:42
【问题描述】：
所以我的网站上有这个 SVG 图像。在桌面上完美运行。但在智能手机上则完全不同
如您所见，它破坏了图像。但它只在智能手机上这样做。
知道为什么吗？ 它只是一个普通的 img 标签：
<img src="brand.svg">
编辑！！
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.65 66.28">
<defs>
<style>
.cls-1{
font-size:50px;
}
.cls-1,.cls-4{
font-family:Montserrat-SemiBold, Montserrat;font-weight:700;
}
.cls-2{
letter-spacing:0em;
}
.cls-3{
letter-spacing:-0.01em;
}
.cls-4{
font-size:16px;
}
.cls-5{
letter-spacing:-0.02em;
}
.cls-6{
letter-spacing:0em;
}
.cls-7{
letter-spacing:0em;
}
.cls-8{
letter-spacing:0.01em;
}
</style>
</defs>
<title>Aktiv 3</title>
<g id="Lag_2" data-name="Lag 2">
<g id="Lag_1-2" data-name="Lag 1">
<text class="cls-1" transform="translate(0 42.5)">Designpl<tspan class="cls-2" x="230.3" y="0">a</tspan>
<tspan class="cls-3" x="260.9" y="0">c</tspan>
<tspan x="289.55" y="0">e</tspan></text>
<text class="cls-4" transform="translate(0.35 62.04)">A <tspan class="cls-5" x="16.4" y="0">w</tspan>
<tspan class="cls-6" x="30.86" y="0">o</tspan>
<tspan class="cls-7" x="41.18" y="0">r</tspan>
<tspan x="47.82" y="0">k of A</tspan>
<tspan class="cls-8" x="95.04" y="0">r</tspan>
<tspan class="cls-6" x="102" y="0">t</tspan>
</text>
</g>
</g>
</svg>我可以在代码中看到有时有一些跨度，只有 1 个字母。可以这样吗？奇怪的是它可以完美地在台式机和笔记本电脑上运行。
工作！ 我让它工作。我通过编写代码的实际外观来清理代码（删除空格、删除 tspan 并删除 x 和 y 坐标），然后我使用另一个名称导入。因为我正在测试它的智能手机不想重新加载使用：Javascript:location.reload(true)。
【问题讨论】：
-
请发布 SVG 代码。
-
看起来像一个时髦的 SVG，宽度试图变宽，但字母缩放不均匀...分享
brand.svg文件中的代码。 -
您需要发布 SVG 代码以获得帮助，但可能是 SVG 使用了设置为“font-family”的
元素，而您测试的移动设备上缺少该元素。跨度> -
我加了代码就知道了。我在代码中看到了一些只有 1 个字母的跨度，但奇怪的是它在桌面上完美地显示了单词。
-
我们需要一个minimal reproducible example，这样我们才能看到它出错了。例如。 CSS 规则之一也可能影响 SVG 的渲染方式。