2016-08-05 10 views
0

Ich versuche, ein SVG mit Angular.js unter Verwendung ng-include einzubetten. Das SVG enthält Animationen, die im Tag defs definiert sind, so dass sie selbst enthalten sind.Embed ein SVG mit Animation über Angular

Jetzt ist das Problem, dass die Animation regelmäßig ausgeführt wird und erstaunlich funktioniert, wenn ich es in meiner lokalen Umgebung mit gulp serve überprüfen, aber die Animation funktioniert nicht in der Produktion oder wenn ich den Server mit gulp serve:dist ausführen.

Ich habe versucht, die SVG auf viele verschiedene Arten, mit img Tag, mit object, etc ... ohne Glück, jedes Mal, wenn ich den Server mit der Produktionskonfiguration ausführen, wird das SVG geladen, aber die Animation ist ignoriert. Noch jemand, der dieses Problem erlebt hat?

+1

Haben Sie den Inhalt der svg überprüft, die in den Browser geladen wird, nachdem die dist-Aufgabe ausgeführt wurde? Hab das nicht gesehen, aber frage dich, ob ein HTML-Minifier oder etwas anderes die SVG anstachelt, wenn du diese Aufgabe ausführst. Abgesehen von der Plugin-Konfiguration gibt es etwas anderes darüber, wie die Site/das Backend/irgendetwas eingerichtet ist? – shaunhusain

+0

@shaunhusain du bist mein Held, yeah der SVG wurde korrekt geladen, aber der Minifying-Prozess hat das ganze SVG komplett durcheinander gebracht und den Inhalt des Style-Tags ungültig gemacht. Der Trick ist, SVGs-Dateien zu überspringen, wenn Schluck für prod minimiert wird, können Sie es in eine Antwort verwandeln, damit ich es annehmen kann ?. – bontoJR

+0

Ah sicher glücklich raten :) – shaunhusain

Antwort

1

Überprüfen Sie die vom Browser gesendete svg, nachdem der Task 'dist' ausgeführt wurde. Ein HTML-Minifier kann Svg-Dateien durcheinander bringen. Wenn dies ein Teil der Aufgabe ist, versuchen Sie, ihn zu deaktivieren oder sicherzustellen, dass er nicht auf SVG-Dateien abzielt.