智能手机浏览器中断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

从<tspan>中删除x和y属性以及<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>

​