AngularJS SVG wird nicht in Chrome geladen - angularjs, svg, angularjs-Direktive

Ich habe einige Tests in Angular mit SVG gemacht, und ich kam mit interessanten Problemen, die nur in Chrome auftauchen.

Wenn ich das versuche:

<object height="30" width="30" type="image/svg+xml" data="test/svg/{{icon}}.svg">Your browser does not support SVG</object>

Es wird es als reines HTML analysieren, aber nur in Chrome.

Was ist eine Problemumgehung für dieses Problem?

Antworten:

Lösung. Von AngularJS Entwicklerhandbuch,

Wir würden erwarten, dass Angular sich daran binden kanndies, aber wenn wir die Konsole überprüfen, sehen wir etwas wie Fehler: Ungültiger Wert für Attribut cx = "{{cx}}". Wegen der Einschränkungen der SVG DOM API kann man nicht einfach cx = "{{cx}}" schreiben. Mit ng-attr-cx können Sie dieses Problem umgehen.

Wenn einem Attribut mit einer Bindung das Präfix vorangestellt istDas ngAttr-Präfix (denormalisiert als ng-attr-) wird dann während der Bindung auf das entsprechende Attribut ohne Präfix angewendet. Dies ermöglicht Ihnen, an Attribute zu binden, die ansonsten von Browsern eifrig verarbeitet würden (z. B. die Circle [cx] -Attribute eines SVG-Elements).

So einfach ist das.