imgタグで呼び出しているsvgで表したラインがchromeで縮小されてしまう

お世話になっております。

imgタグでsvgを呼び出して、h2タグのテキスト・およびh2タグ下の横線を表現しようとしております。

safariではこのように希望通りに表示されます。

上の画像のように、svgで表現している横線が幅いっぱいに広がっています。

ですが、chromeではsvgの横線がランダム？に縮小されてしまいます。Firefoxでも同様に縮小されました。
以下のような感じです。

imgタグが入っているpタグ自体は幅いっぱいまで広がっているのですが、画像自体の表示がなぜか幅いっぱいに広がりません。
ですが全てではなく意図した幅で表示されているsectionもあります。

これはどのようにすればsafariのように同じ幅で表示されますでしょうか。

コードは以下の通りです。

html

　　<section class="term">
      <h2 class="term-title"><img src="./assets/img/svg/51.svg" alt="h2タグ"></h2>
      <p><img src="./assets/img/svg/55.svg" alt="ライン"></p>
      <div class="term-text">ここに説明分が入ります。
      </div>
    </section>

CSS

.term {
  width: 80%;
  margin: 20px auto;
}
.term-title {
  width: 11%;
  margin:  auto;
}
.term img{
    display: block;
    max-width: 100%;
    height: auto;
 }
.term p img {
   width: 1080px;
}

横線のsvgファイルは以下です。

SGV
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 857.76 6.86"><path fill="none" stroke="#003a95" stroke-width="3.479" stroke-miterlimit="10" d="M2.69 3.93h853.84"/></svg>

横線の表現をsvgではなくborderで表現するとchromeでも問題なく表示されます。

ですが今回はsvgでということなので、どうしたものかと手が止まっております。

文字でお伝えしづらい部分もありわかりにくいかもしれませんが、どなたが打開方法をご教示くださいませんでしょうか。

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

Chrome でのみ再現しました。
svg 要素に width / height 属性をつけるときちんと認識するようです。
https://developer.mozilla.org/ja/docs/Web/SVG/Element/svg

投稿2020/03/05 05:50

x_x

総合スコア13749

uni..

2020/03/05 10:42

ご回答ありがとうございます。 <img src="./assets/img/svg/55.svg" alt="" width="1080" height="10"> のように指定してみたのですが、やはりランダムに短くなってしまう現象が起こります・・・ x_x様の環境で問題ないということは私の環境の何かが影響しているのだと思いますが、未だ不明です。ありがとうございます。もう少し、格闘してみます^^;