svgがIEで縮小されてしまう。

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

先日、
https://teratail.com/questions/245202
「imgタグで呼び出しているsvgで表したラインがchromeで縮小されてしまう」

にて質問させていただいた者です。

ご回答いただいたことでChrome、safari、fireFoxで問題なく表示できるようになったのですが、
IEでのみ画像が横幅いっぱいに広がらず、左右に少しずつ縮小されてしまいます。

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

HTML
1    <section class="term">
2      <h2 class="term-title">h２タグ</h2>
3      <p><img src="./assets/img/svg/55.svg" alt=""></p>
4      <div class="term-text">コンテンツが入ります
5    </section>
6

scss
1.term {
2  max-width: 960px;
3　width: 100%;
4  padding: 0 15px;
5  margin: auto;
6
7}
8
9.term-title {
10  font-size: 28px;
11
12  & + p {
13    width: 930px;
14    max-width: 100%;
15    height: auto;
16    img {
17      width: 100%;
18      height: auto;
19    }
20  }
21
22}
23
24

上記コードで、IEでのみ最大幅のときにsvgが左右に少し縮小して表示され、
モバイルサイズにするとさらに縮小してしまいます。

ためしたこと

１：
https://qiita.com/Shitsu/items/4edf6fae3329c4904f29
を参考にsvgの親要素のサイズを数値で指定し、imgタグにwidth:100% height: auto;を追記しました。

これだとsvg自体は大きく表示されたのですが、右側にずれたように表示されてしまい、希望の表示になりませんでした。

２：
svgに指定している width="930" height="9" をviewBoxより大きくすると拡大表示される、
とネットで見たので、
viewBoxの数字を小さくしてみたのですが、線が太くなるもののIEで左右が縮小される状況は変わらず・・・

３:
dタグの中のhは直線の長さを表すとのことでしたので、長さを930と変えてもみましたが、
それでも微妙に表示は変わるものの他のブラウザのように表示してくれません。

どうすれば、左右に縮小されず他のブラウザのようにwidth幅いっぱいに表示されるのでしょうか。

どうぞよろしくお願いいたします。

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

回答1件

ベストアンサー

これでどうでしょうか？

CSS
1.term-title + p {
2  position: relative;
3  height: 9px;
4}
5
6.term-title + p img {
7  position: absolute;
8  top: 0;
9  left: 0;
10  width: 100%;
11  height: 100%;
12}