IE11のSVG背景画像のバグ

IE11の背景にSVG画像を設定すると位置がおかしかったり、サイズがおかしい場合の対応方法。
(background-size , background-positionが効かない)

以下の属性をsvg画像に追加する。

• preserveAspectRatio=“xMinYMid”
• width=“実際の幅”
• height=“実際の高さ”

指定前

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.53 3.78"><defs><style>.cls-1{fill:none;stroke:#eb6400;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.78px;stroke-dasharray:1.26 10.07;}</style></defs><title>product-ttl-boder_1</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="text"><line class="cls-1" x1="1.89" y1="1.89" x2="502.64" y2="1.89"/></g></g></svg>

指定後

<svg preserveAspectRatio="xMinYMid" width="504.53" height="3.78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.53 3.78"><defs><style>.cls-1{fill:none;stroke:#eb6400;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.78px;stroke-dasharray:1.26 10.07;}</style></defs><title>product-ttl-boder_1</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="text"><line class="cls-1" x1="1.89" y1="1.89" x2="502.64" y2="1.89"/></g></g></svg>