IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。
これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。
サンプルソース※IEで表示すると症状が再現します
.pattern {
width: 100vw;
height: 10vw;
background: url('dot.svg');
background-size: 5vw;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"> <circle cx="0" cy="0" r="12"/> <circle cx="30" cy="30" r="12"/> <circle cx="60" cy="60" r="12"/> <circle cx="0" cy="60" r="12"/> <circle cx="60" cy="0" r="12"/> </svg>
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60"> <circle cx="0" cy="0" r="12"/> <circle cx="30" cy="30" r="12"/> <circle cx="60" cy="60" r="12"/> <circle cx="0" cy="60" r="12"/> <circle cx="60" cy="0" r="12"/> </svg>