2

I am struggling to get my little ionic app to show an SVG file in IOS using the IonicFramework.

It works in the browser and also on Android 5.0 but when I try it out in IOS my flag does not appear.

If i add the flag hardcoded into the html the flag appears as it should...

Hmm what am i doing wrong?? The example is based on a new Ionic project using the blank template...

JS snippet:

.controller('myCtrl', function($scope) {

  var flag='<polygon points="0 0,0 60,120 40,120 20" fill="white" /><polygon points="0 0,24 4,24 56,0 60" fill="red" /><polygon points="48 8,72 12,72 48,48 52" fill="red" /><polygon points="96 16,120 20,120 40,96 44" fill="red" /><polygon points="0 0,0 60,120 40,120 20" fill="none" stroke="black" stroke-width="0.1" />';

  $scope.myflag = flag;
});

HTML snippet:

<p>Postponed! (does not work)</p>
<svg ng-bind-html="myflag"></svg>

http://codepen.io/flemmingdjensen/pen/XbRKLV

Flemming Jensen
  • 51
  • 1
  • 2
  • 8
  • Could this be an namespace issue, too? See here: http://stackoverflow.com/questions/24535181/ng-bind-html-in-a-svg-text-tag-do-not-display-tspan-in-firefox-and-ie – LarsBauer Jun 07 '15 at 12:04
  • Thanks for your answer but still nu success...:( I added the following but the flag does not get rendered still: – Flemming Jensen Jun 08 '15 at 09:29
  • I can see that if i open the demo codepen in Safari on må Mac it does not work either. I guess that in IOS the browser is also a Safari like browser – Flemming Jensen Jun 08 '15 at 10:47
  • Ok - I have found a solution now. Instead of having a svg tag and use ng-bind-html on that i now use a div tag and then inject the complete svg file into that. That seems to work both in safari and on IOS – Flemming Jensen Jun 08 '15 at 11:38

0 Answers0