Question

我有一个AngularJS指令，需要通过ng-bind-html渲染SVG。 ng-bind-html内容按预期包含在Chrome，MS Edge和Firefox中，但未包含在Internet Explorer 11中。如果直接添加html，则可以看到SVG。

这是IE的限制吗？如果是这样，是否有解决方法？

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="angular.js@1.6.5" 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>

这里是一个jsbin link，它直接使用SVG并带有ng-bind-html。 IE不会显示ng-bind-html

谢谢。

带有SVG的角ng-bind-html无法在Internet Explorer中呈现

0 个答案: