SVG Gradienten nicht auf MS Rande in Anwendung angewandt Aurelia

Question

Ich Aufbau eine AureliaJS basierte Anwendung, die eine SVG-basierte Komponente enthält. Mein Problem ist, dass in MS Edge die Gradienten dieses SVG nicht gerendert werden (siehe Bild unten: das "Messgerät" soll transparent sein und die beiden Kreise grün). Es wird korrekt in allen anderen Browsern angezeigt, die ich getestet habe (FireFox, IE11, Chrome).

Die Gradienten sind im Inneren der in einem SVG defs Abschnitt definiert. Sie werden dann von ihren IDs verwendet.

Ich habe versucht:

• Um die SVG Teil der Komponente als SVG-Datei in Rand zu öffnen. Seltsamerweise wird es richtig dargestellt. Also ich denke das SVG ist richtig.
• Um das Aurelia Markup zu entfernen: Das Problem ist immer noch hier.
• Um den Wert der Füllung (derzeit fill: url(#gauge-fill-2)) in fill: url('#gauge-fill-2') oder fill: url('/#gauge-fill-2') ohne Erfolg zu ändern.

ich auch die folgende Meldung in der Konsole, die, wenn ich diese SVG entfernen verschwindet (ich es von Französisch übersetzt, wie ich eine Französisch-Version von Windows 10 haben) XML5633: The name of the ending tag doesn't match the name of the starting tag. Line. 60, column 7 Wenn jedoch Ich habe den Code gelesen, ich konnte kein Problem beim Schließen von Tags feststellen. Um dies zu vermeiden, entferne ich den größten Teil des Codes und belasse nur ein Element mit einem Farbverlauf darauf. Diese Nachricht war immer noch da.

Der vollständige Code der Komponente ist hier verfügbar: https://bitbucket.org/arenaoftitans/arena-of-titans/src/9f5f70ff3fc71832bcac90ce0dcc5204a471b095/app/game/play/widgets/gauge/gauge.html?at=master&fileviewer=file-view-default

Jede Idee, was das Problem sein könnte und wie es zu lösen?

Answer 1

Das Problem wird durch das Update des Erstellers gelöst. Ich brauche nur, dass es weit verbreitet ist.