Угловой ng-bind-html svg в svg Internet Explorer не работает

Question

Мы создаем приложение с угловым.js, где у нас есть гигантское svg-изображение, которое содержит много других svg-изображений и фигур.

Теперь мы сталкиваемся с проблемой, что Internet Explorer (даже 11) не хочет связывать переменную svg-string в другом svg-элементе.

Чтобы сделать эту проблему ясно, что я обновил jsfiddle с проблемой: похожую

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

В строке 4 HTML-раздела, мы имеем наш SVG-элемент, где мы хотим вставить другую svg- элемент в:

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

в ctrl.svg-переменной мы имеем полный SVG-строку, которая получает разобранную в переменную с помощью trustAsHtml() - функция.

В Firefox и Chrome это работает отлично - но не в IE. Элемент svg не отображается.

Если вы перейдете к строке 4 и смените svg-элемент (где мы хотим связать нашу строку svg) с тегом div-тега (а также удалим атрибут xmlns), то он также работает в Internet Explorer!

я нашел похожие проблемы (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), но предлагаемые решения (использует Div-тег или использовать нг-повтор для детей-нота) не являются решением для нашего случая, потому что нам нужны вложенный SVGs и нужно загрузите другой тип svgs в наш «svg-frame».

Есть ли у кого-нибудь идеи, как мы могли бы решить эту проблему? Возможно, IE просто нужно больше опций для идентификации самого svg-тега. Или первый comment второго связанного вопроса - большая проблема?

Спасибо за любые идеи!

Answer 1

У меня была аналогичная проблема, и решить ее, создав директиву, которая отображает 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)); 
     } 
     }; 
    }]); 

Используя его, как здесь:

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

Answer 2

Другой способ решить эту проблему с помощью ng-include с помощью src = 'path_to_svg'. Единственное отличие от исходного вопроса состоит в том, что вам нужен svg как файл (а не код svg в строковой переменной).

Если у вас нет svg в отдельном файле, dec'sanswer должен помочь!