I have an AngularJS directive that needs to render SVG via ng-bind-html. The ng-bind-html contents are included as expected in Chrome, MS Edge and Firefox, but they're not included in Internet Explorer 11. I can see the SVG if I add the html directly.
Is this a limitation of IE? If so, is there a workaround?
var app = angular.module('app', ['ngSanitize']);
app.controller('ctrl', function($scope) {
$scope.mytxtsvg = '<g id="3" fill="#FF9800" fill-rule="nonzero"><path d="M9.99,0 C4.47,0 0,4.48 0,10 C0,15.52 4.47,20 9.99,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 9.99,0 Z M14.23,16 L10,13.45 L5.77,16 L6.89,11.19 L3.16,7.96 L8.08,7.54 L10,3 L11.92,7.53 L16.84,7.95 L13.11,11.18 L14.23,16 Z" id="Shape"></path></g>';
});
app.directive('rendersvg', ['$sce', function($sce) {
return {
templateNamespace: 'svg',
template: '<svg version = "1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" xmlns:ev = "http://www.w3.org/2001/xml-events" ng-bind-html="txtsvg" viewbox="0 0 20 20" class="rendersvg"><svg>',
restrict: 'E',
scope: {
txtsvg: '='
},
replace: true,
link: function(scope, element, attrs, ctrl) {
if (scope.txtsvg != null) {
scope.txtsvg = $sce.trustAsHtml(scope.txtsvg);
}
}
}
}]);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script data-require="[email protected]" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular-sanitize.js"></script>
<body ng-app="app" ng-controller="ctrl">
<div>
<span>ng-bind-html SVG</span>
<rendersvg txtsvg="mytxtsvg"></rendersvg>
</div>
<div>
<span>SVG</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" viewBox="0 0 20 20" class="rendersvg ng-binding ng-isolate-scope">
<g id="3" fill="#FF9800" fill-rule="nonzero">
<path d="M9.99,0 C4.47,0 0,4.48 0,10 C0,15.52 4.47,20 9.99,20 C15.52,20 20,15.52 20,10 C20,4.48 15.52,0 9.99,0 Z M14.23,16 L10,13.45 L5.77,16 L6.89,11.19 L3.16,7.96 L8.08,7.54 L10,3 L11.92,7.53 L16.84,7.95 L13.11,11.18 L14.23,16 Z" id="Shape"></path>
</g>
</svg>
</div>
</body>
</html>Here's a jsbin link that has the SVG directly and with ng-bind-html. IE does not display the ng-bind-html
Thank you.