SVG background-image positioning issue in IE 11?

Question

css

So. There is a setting: background-images should be directly in the style file in SVG and base64 format.
To position the background, use background-position: left 100%; (i.e. underlining is obtained). And now attention: works everywhere, except IE. I'm testing on version 11.0.20, I haven't tried it below - it's scary.
For those who did not understand me:
1. Open codepen.io/anon/pen/YXQreG in the browser - we see the underlined text
2. Open it in IE - we see the strikethrough text
And now, gentlemen, experts, the question is: what to do?
I would like to cope with less blood. What do you advise?

Answer 1

Removed unnecessary attributes in SVG , incomprehensible path (the first of two).
The solution is to add background-size to CSS .
Update: After more thought, the auto value has been changed to 3px .

.container {
  background-size: 100% 3px;
}

First option
We explicitly specify width and height in SVG .
Second option
Use preserveAspectRatio in xMinYMax value ( xMidYMid by default ).
Third option
Use width , height and preserveAspectRatio set to none . Taking into account Chrome , the most armor-piercing.

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" width="203" height="3" viewBox="0 0 203 3">