スマホ実機で見た場合のSVG画像の表示が崩れる

Question

以下の画像のように、実機で見た場合のSVG画像に崩れが生じています。
PCサイズでは問題がありませんが、スマホ(私はiphone6sで確認中)の場合は添付画像のようになります。

画像はPOINT 2というのを表していますが、2の上の部分が切れてしまっています。

確認したこと
・Google検証ツールの スマホサイズ確認→適切に表示
・PCサイズで見た場合→適切に表示

・実機のスマホサイズ(iphohe6sで確認)→崩れ
となります。

        <div class="point__img"><img src="img/point1.svg" alt=""></div>
コード

このSVGに適用したSCSS
※tbというのは768px以下の時に以下のCSSを適用するということです、PCサイズではSVGにwidth等は指定していません

      @include tb{
        .point__img{
          width: 180px;
          height: auto;
          margin-bottom: 24px;
          img{
            display: block;
          }

        }
      }
コード

このSVGファイルのコード

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="312" height="394.267" viewBox="0 0 312 394.267">
  <defs>
    <clipPath id="clip-path">
      <rect y="74" width="89" height="159" fill="none"/>
    </clipPath>
  </defs>
  <g id="グループ_934" data-name="グループ 934" transform="translate(-816 -3164.733)">
    <circle id="楕円形_36" data-name="楕円形 36" cx="156" cy="156" r="156" transform="translate(816 3247)" fill="#719091" opacity="0.2"/>
    <g id="スクロールグループ_4" data-name="スクロールグループ 4" transform="translate(928 3119)" clip-path="url(#clip-path)" style="isolation: isolate">
      <text id="_2" data-name="2" transform="translate(0 184)" fill="#2d2d2d" font-size="198" font-family="Yrsa-SemiBold, Yrsa" font-weight="600"><tspan x="0" y="0">2</tspan></text>
    </g>
    <text id="POINT" transform="translate(971 3190.733)" fill="#2d2d2d" font-size="28" font-family="Yrsa-SemiBold, Yrsa" font-weight="600"><tspan x="-37.324" y="0">POINT</tspan></text>
    <g id="グループ_866" data-name="グループ 866" transform="translate(441.541 3040.549)">
      <g id="グループ_865" data-name="グループ 865" transform="translate(462.459 311.047)">
        <line id="線_142" data-name="線 142" x1="24.773" y2="24.773" transform="translate(19.521 12.526)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_285" data-name="パス 285" d="M522.79,328.417H506.322a9.936,9.936,0,0,1-6.994-2.878l-9.822-9.728" transform="translate(-450.95 -309.02)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_286" data-name="パス 286" d="M462.459,348.041l9.982,9.982,36.994-36.994-9.982-9.982" transform="translate(-462.459 -311.047)" fill="#fff" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_287" data-name="パス 287" d="M467.431,332.908a2.9,2.9,0,1,0,2.9-2.894A2.895,2.895,0,0,0,467.431,332.908Z" transform="translate(-460.344 -302.977)" fill="#2e2d2c"/>
        <g id="グループ_863" data-name="グループ 863" transform="translate(34.966 52.715)">
          <path id="パス_288" data-name="パス 288" d="M486.988,348.027l37.926,37.926a5.839,5.839,0,0,0,8.257-8.258l-3.293-3.293" transform="translate(-486.988 -348.027)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
          <path id="パス_289" data-name="パス 289" d="M512.523,363.013,524.008,374.5a5.839,5.839,0,0,0,8.258-8.258l-6.7-6.7" transform="translate(-476.122 -343.127)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
          <path id="パス_290" data-name="パス 290" d="M518.316,358.649,531.5,371.838a5.839,5.839,0,0,0,8.258-8.258l-13.189-13.189" transform="translate(-473.657 -347.021)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        </g>
        <g id="グループ_864" data-name="グループ 864" transform="translate(28.531 49.03)">
          <path id="パス_291" data-name="パス 291" d="M509.662,378.626a5.839,5.839,0,0,1-8.258-8.257l3.294-3.294a5.839,5.839,0,0,1,8.257,8.258Z" transform="translate(-475.146 -336.964)" fill="#e2e9e9" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
          <path id="パス_292" data-name="パス 292" d="M492.441,362.108a5.839,5.839,0,1,1-8.258-8.257l6.7-6.7a5.838,5.838,0,0,1,8.257,8.257Z" transform="translate(-482.474 -345.442)" fill="#e2e9e9" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
          <path id="パス_293" data-name="パス 293" d="M502.675,375.045a5.839,5.839,0,0,1-8.258-8.258l6.7-6.7a5.839,5.839,0,1,1,8.257,8.258Z" transform="translate(-478.119 -339.937)" fill="#e2e9e9" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
          <path id="パス_294" data-name="パス 294" d="M495.688,371.463a5.839,5.839,0,0,1-8.258-8.258l10.1-10.1a5.839,5.839,0,0,1,8.258,8.258Z" transform="translate(-481.092 -342.91)" fill="#e2e9e9" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        </g>
        <line id="線_143" data-name="線 143" y1="15.364" x2="15.364" transform="translate(102.604 38.926)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <line id="線_144" data-name="線 144" x2="26.699" y2="26.699" transform="translate(91.568 12.526)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_295" data-name="パス 295" d="M541.177,369.892l4.664,4.664a5.941,5.941,0,0,0,8.222.248,5.84,5.84,0,0,0,.144-8.4l-21.944-21.944a9.123,9.123,0,0,0-6.493-2.671l-10.739.057-4.855,4.854a11.682,11.682,0,0,1-13.252,2.3,2.95,2.95,0,0,1-.817-4.75l13.146-13.145a9.2,9.2,0,0,1,6.509-2.7H529.1a9.942,9.942,0,0,0,7-2.878l9.82-9.728" transform="translate(-448.509 -309.02)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_296" data-name="パス 296" d="M527.857,330.9a11.749,11.749,0,0,1,0,16.616" transform="translate(-434.631 -302.6)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_297" data-name="パス 297" d="M571.886,348.041l-9.982,9.982-36.994-36.994,9.982-9.982" transform="translate(-435.885 -311.047)" fill="#fff" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <line id="線_145" data-name="線 145" x1="15.364" y1="15.364" transform="translate(18.033 38.926)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
        <path id="パス_298" data-name="パス 298" d="M554.619,332.908a2.895,2.895,0,1,1-2.894-2.894A2.894,2.894,0,0,1,554.619,332.908Z" transform="translate(-425.707 -302.977)" fill="#2e2d2c"/>
      </g>
      <path id="パス_299" data-name="パス 299" d="M486.909,337.482a11.748,11.748,0,0,0,0,16.614" transform="translate(8.94 11.249)" fill="none" stroke="#2e2d2c" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.584"/>
    </g>
  </g>
</svg>


コード

Answer 1

    <clipPath id="clip-path">
      <rect y="74" width="89" height="159" fill="none"/>
    </clipPath>
...
    <g id="スクロールグループ_4" data-name="スクロールグループ 4"
       transform="translate(928 3119)" clip-path="url(#clip-path)"
       style="isolation: isolate">
      <text id="_2" data-name="2" transform="translate(0 184)" fill="#2d2d2d"
            font-size="198" font-family="Yrsa-SemiBold, Yrsa" font-weight="600">
<tspan x="0" y="0">2</tspan></text>
    </g>

高さ198ピクセルの文字を高さ159ピクセルの長方形でクリップしていますので、質問文の画像のように欠けるのは妥当な描画に見えます。選ばれるフォントによってはうまく長方形に収まるかもしれません。

Comments

[退会済みユーザー]

ありがとうございます！SVGの数値のy軸やフォントサイズを落とすことで綺麗に見えるようになりました！
助かりました！