SVG 徽标无法在移动设备上正确显示

Question

我创建了以下 SVG：

它在桌面上显示正确，但在移动设备上出现问题。这是显示方式的屏幕截图：

这是 SVG：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.42 49.75">
    <defs>
    <style>
    .cls-1,.cls-3{font-size:48px;font-family:SHOOTING;}
    .cls-2{letter-spacing:-0.02em;}
    .cls-3{fill:#ffb857;}
    .cls-4{fill:#ff8f00;letter-spacing:0em;}
    </style>
    </defs>
    <title>logo</title>
    <g id="Capa_4" data-name="Capa 4">
    <text class="cls-1" transform="translate(41 41.79)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">AMINAS</tspan></text>
    </g>
    <g id="Capa_3" data-name="Capa 3">
    <text class="cls-3" transform="translate(42.76 40.32)">BUS<tspan class="cls-2" x="52.37" y="0">C</tspan><tspan x="68.78" y="0">A</tspan><tspan class="cls-4" x="87.17" y="0">MINAS</tspan></text>
    <path d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
    </g>
    </svg>

这是我有 SVG 的 HTML：

 <div class="logo"><img src="./source/logo.svg" alt="Buscaminas" width="255px"></div>

这是 CSS 的 div:

.logo {
    height: 50px;
    width: 255px;
    margin: 10px auto 19px;
}

我该如何解决这个问题？

Answer 1

我删除了 <tspan> 元素的 x 和 y 属性。这解决了塞满文本的问题。但是，由于您使用的是不可靠的特殊字体系列，因此字体系列不同并且文本更宽。为了获得 svg canvas 中的所有文本，我必须更改 viewBox 的值。使用替代字体系列可能是个好主意，例如 Arial。

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 60">
    <defs>
    <style>
    .cls-1,.cls-3{font-size:48px;font-family:SHOOTING, Arial;}
    .cls-2{letter-spacing:-0.02em;}
    .cls-3{fill:#ffb857;}
    .cls-4{fill:#ff8f00;letter-spacing:0em;}
    </style>
    </defs>
    <title>logo</title>
   <g id="wrapper">
    <g id="Capa_4" data-name="Capa 4">
    <text class="cls-1" x="41" y="41.79">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
    </g>
    <g id="Capa_3" data-name="Capa 3">
    <text class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
    <path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
    </g>
   </g>
</svg>

更新

为了控制文本的长度，您可以使用 textLength 和 lengthAdjust 属性，如下所示：

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 55">
    <defs>
    <style>
    .cls-1,.cls-3{font-size:48px;font-family:SHOOTING,Arial;}
    .cls-2{letter-spacing:-0.02em;}
    .cls-3{fill:#ffb857;}
    .cls-4{fill:#ff8f00;letter-spacing:0em;}
    </style>
    </defs>
    <title>logo</title>
   
    <g id="Capa_4" data-name="Capa 4">
    <text class="cls-1" x="41" y="41.79" textLength="200" lengthAdjust="spacingAndGlyphs">BUS<tspan class="cls-2" >C</tspan><tspan>AMINAS</tspan></text>
    </g>
    <g id="Capa_3" data-name="Capa 3">
    <text textLength="200" lengthAdjust="spacingAndGlyphs" class="cls-3" x="42.76" y="40.32">BUS<tspan class="cls-2" >C</tspan><tspan>A</tspan><tspan class="cls-4">MINAS</tspan></text>
    <path id="b" d="M34.69,19.49a1.27,1.27,0,0,0-.7-.72,1.29,1.29,0,0,0-1,0,11.93,11.93,0,0,0-4,2.63,12.08,12.08,0,0,0-2.63,4,1.29,1.29,0,0,0,0,1,1.26,1.26,0,0,0,.73.7,1.34,1.34,0,0,0,.49.1,1.28,1.28,0,0,0,1.25-.83,9.17,9.17,0,0,1,2-3.07,9.06,9.06,0,0,1,3.08-2,1.39,1.39,0,0,0,.72-.73A1.29,1.29,0,0,0,34.69,19.49Zm19.53-7.37,1,1-5.06,5,1.41,1.4a1.29,1.29,0,0,1,.4.95,1.26,1.26,0,0,1-.4.94L50.2,22.73a14.61,14.61,0,0,1,.69,12.78,14.32,14.32,0,0,1-7.77,7.77,14.55,14.55,0,0,1-11.34,0,14.69,14.69,0,0,1-4.66-3.11,14.75,14.75,0,0,1-4.26-10.33A14.26,14.26,0,0,1,24,24.17a14.58,14.58,0,0,1,20.55-7.08l1.32-1.33a1.31,1.31,0,0,1,.95-.39,1.29,1.29,0,0,1,.94.39l1.41,1.41ZM54.38,11a.63.63,0,0,1-.45.21.66.66,0,0,1-.48-.21L51.56,9.09a.72.72,0,0,1-.18-.48.67.67,0,0,1,1.14-.47L54.38,10a.61.61,0,0,1,.21.47A.59.59,0,0,1,54.38,11Zm4.77,4.77a.69.69,0,0,1-.95,0l-1.87-1.88a.63.63,0,0,1,0-.94.6.6,0,0,1,.47-.2.58.58,0,0,1,.46.2l1.89,1.87a.69.69,0,0,1,0,1Zm.85-3.8a.62.62,0,0,1-.19.48.65.65,0,0,1-.47.19h-2a.65.65,0,0,1-.67-.67.65.65,0,0,1,.19-.47.62.62,0,0,1,.48-.19h2a.65.65,0,0,1,.66.66ZM56,8v2a.66.66,0,1,1-1.32,0V8A.66.66,0,1,1,56,8Zm3.13,1.14L57.26,11a.61.61,0,0,1-.45.21.66.66,0,0,1-.48-.21.59.59,0,0,1-.21-.46.61.61,0,0,1,.21-.47L58.2,8.14A.64.64,0,0,1,58.67,8a.65.65,0,0,1,.67.66A.73.73,0,0,1,59.15,9.09Z" transform="translate(-22.86 -1.21)"/>
    </g>
</svg>

SVG 徽标无法在移动设备上正确显示

SVG logo not displaying correctly on mobile

html

css

svg

adobe-illustrator