智能手机浏览器破坏SVG图片

Question

所以我的网站上有这张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>

我在代码中看到有时跨度很小，只有一个字母。可以吗？奇怪的是，它可以完美地在台式机和笔记本电脑上运行。

编辑！

工作！ 我知道了。我通过编写代码的实际外观（删除空格，删除tspan和删除x和y坐标）来清理代码，然后使用另一个名称导入。因为我正在对其进行测试的智能手机不想使用以下代码重新加载：Javascript：location.reload（true）。

Answer 1

从x和y之间的空格中删除<tspan>和<tspan>属性

<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" >a</tspan><!--
--><tspan class="cls-3" >c</tspan><!--
--><tspan>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">o</tspan><!--
--><tspan class="cls-7">r</tspan><!--
--><tspan>k of A</tspan><!--
--><tspan class="cls-8" >r</tspan><!--
--><tspan class="cls-6" >t</tspan>
</text>
</g>
</g>
</svg>