所以我的网站上有这张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)。
答案 0 :(得分: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>