Bevor ich aufgab und meine Lösung komplett in SVG erstellte, dachte ich, ich würde dies an die StackOverflow-Crowd weitergeben, um zu sehen, ob ich etwas verpasst habe.Skalierung eines eingebetteten <image> innerhalb von <svg> in IE 11+
In einem aktuellen Projekt habe ich ein .png, das die Frontplatte eines realen Bewässerungssteuergeräts darstellt. Das SVG agiert als Overlay und enthält die Koordinaten aller druckbaren Tasten und virtuellen LEDs, die bei Bedarf auf dem realen Gerät blinken, mit einer Node-Anwendung interagieren, die mit dem "echten" Wasserregler kommuniziert, und das .png ist ein Embedded Hintergrundbild. (siehe Code unten) Wir ändern programmatisch (über Javascript) das Overlay-SVG und das Faceplate-Bild bei der Eingabe in die Seite, abhängig von früheren Benutzereingaben.
Alles funktioniert gut, wir können Tasten auf dem SVG-Overlay drücken und der reale Welt Controller reagiert, und umgekehrt.
Das Problem besteht darin, das eingebettete Bild zu skalieren. Unter Chrome, Firefox und Opera kann ich das Browserfenster auf verschiedene Größen skalieren und das SVG und eingebettete Bild wunderbar skalieren. 
Aber IE 11+ weigert sich, Ball zu spielen, und beharrt hartnäckig das eingebettete Bild in einer reduzierten Größe. 
Ich glaube, ich habe gegoogelt-to-Tod alles zum Thema SVGs in IE, und versucht, verschiedene CSS-Hacks und DOM-Manipulationen, obwohl die meisten scheinen anzuwenden, um die Einbettung des SVG in einem HTML-Tags img Skalierung, und kein SVG mit einem eingebetteten Bild-Tag.
Ich habe versucht, alle Breite/Höhe aus dem SVG zu entfernen und CSS-only; Ich habe versucht, 100% width/height in der Bildmarke zu benutzen, um (vermutlich) zu erlauben, dass die viewBox seine Maße steuert; Ich habe versucht, die Breite/Höhe auf die gleichen Werte von viewBox zu fixieren; Ich habe versucht, preservaspectRatio sowohl in der SVG-Header und das Bild zu verwenden. Mir gehen die Ideen aus.
Relevante Codebeispiel:
<svg class="scaling-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 970 530" preserveAspectRatio="xMidYMid meet" >
<image id="faceplate" xlink:href="../images/TWC-front.jpg" class="svg-content" height="530" width="970" preserveAspectRatio="xMidYMid meet"></image>
<g>
<rect id="rect_textDisplay" x="322" y="157" width="530" height="52" opacity="0" />
<text fill="black" x="326" y="176" id="displine1" xml:space="preserve">Welcome to the Virtual Controller</text>
<text fill="black" x="326" y="198" id="displine2" xml:space="preserve"> ... waiting for connection</text>
</g>
<rect id="dial_irroff" x="39" y="319" opacity="0" width="75" height="25" />
<rect id="dial_manual" x="63" y="287" opacity="0" width="80" height="25" />
<rect id="dial_auto" x="148" y="278" opacity="0" width="50" height="25" />
...
Irgendwelche Ideen oder in einer Richtung prodding könnte ich nicht in Betracht gezogen haben, werden sehr geschätzt. Ich möchte die Lösung in der aktuellen Form so gut wie möglich behalten, da wir den Bildbaustein abhängig von der Benutzereingabe dynamisch ändern, und es gibt etwa 15 verschiedene Bildbausteine, die zwischen zwei SVG-Überlagerungen verwendet werden. Es würde einige Zeit dauern, um jedes Faceplate in reinem SVG neu zu erstellen. Aber ich bin bereit, es zu tun, wenn es nötig ist. :(
IE-Unterstützung abbrechen und Edge verwenden. Problem gelöst. – Mardoxx
Versuchen Sie, dem Bild eine explizite Breite/Höhe zu geben, d. H. Width = "100%" height = "100%" für das Element root svg. –
Wenden Sie 100% Höhe auf HTML-, Körper- und SVG-Element an. Wenn es immer noch nicht funktioniert, verwenden Sie eine 100vh Höhe mit modernen Browsern und eine feste Höhe mit IE. – llobet