Angular ng-bind-html svg into svg Internet Explorer doesn't work

Question

We're building an application with angular.js, where we have a giant svg-image which contains a lot of other svg-images and shapes.

Now we are facing the problem, that the Internet Explorer (even 11) doesn't want to bind a svg-string-variable into an other svg-element.

To make the problem clear I updated a jsfiddle with a similiar problem:

http://jsfiddle.net/B87ca/19/

On line 4 of the html-section, we have our svg-element where we want to insert another svg-element into:

<svg xmlns="http://www.w3.org/2000/svg" id="svg" ng-bind-html="ctrl.svg"></svg>

In the ctrl.svg-variable we have a complete svg-string, which gets parsed into the variable using the trustAsHtml()-function.

In Firefox and Chrome this works perfectly - but not in IE. The svg element doesn't get rendered.

If you now go to line 4 and change the svg-element (where we want to bind our svg-string to) into a div-tag (and also remove the "xmlns" attribute), then it also works in Internet Explorer!

I found similiar problems (SVG and ng-bind-html is not working on IOS using Ionic Framework, Angular on a svg - $sce.trustAsHtml inside svg does not work in safari and ie), but the proposed solutions (use a div-tag or use ng-repeat for the child-notes) are no solution for our case, because we need nested svgs and need to load different type of svgs into our "svg-frame".

Does anybody have an idea how we could solve this problem? Maybe the IE just need more options to identify the svg-tag itselfs. Or is the first comment of the second linked question the big problem?

Thanks for any ideas!

Answer 1

I had a similar problem and have solved it by creating a directive that displays an svg:

angular.module('DeviceView')

    /**
     * @doc directive
     * @name extSvg
     * @description directive for embedding SVG content into a HTML page
     */
    .directive('extSvg', [ '$compile',  function ($compile) {
      return {
        restrict: 'E',
        scope: {

          /**
           * @doc property
           * @propertyOf extSvg
           * @name content
           * @description
           * Contains a SVG string.
           */
          content: '='
        },
        link: function($scope, $element) {
          $element.replaceWith($compile('<svg>' + $scope.content + '</svg>')($scope.$parent));
        }
      };
    }]);

Using it like here:

<ext-svg data-content="vm.model.svg"></ext-svg>

Answer 2

Another way to solve this problem is using the ng-include attribute with src='path_to_svg'. The only difference from the original question is that you need the svg as a file (not the svg code within a string variable).

If you don't have the svg in a seperate file, dec's answer should help!