Angular on a svg - $sce.trustAsHtml inside svg does not work in safari and ie

Question

I am new to angular and svg and i can't seem to get past this problem.

I am using $sce.trustAsHtml on a <g> element. My code works fine in Chrome and firefox but for some reason it fails in appending the variable in Safari and IE11. Any ideas why?

P.S. I have to find a way to link the content to that <g> because the svg also has some dynamic content with ng-repeat (that part woks fine)

In html:

  <svg xmlns:xlink="http://www.w3.org/1999/xlink"  xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px"y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"><g ng-bind-html="svg"></g>.... other dynamic content...</svg>

In js

 $scope.svg = $sce.trustAsHtml('<path fill="#F5F5F5" d="M153.065,320.752l-43.868,14.321c28.69,86.341,107.159,149.954,201.385,156.805l3.875-42.49 C238.671,442.564,175.884,390.696,153.065,320.752z"></path> <path fill="#E0E0E0" d="M314.457,449.388l4.208-46.141c-57.075-5.139-104.36-44.202-121.546-96.877l-44.054,14.382 C175.884,390.696,238.671,442.564,314.457,449.388z"></path> <path fill="#CCCCCC" d="M241.173,291.988l-44.054,14.382c17.185,52.675,64.471,91.738,121.546,96.877l4.208-46.141 C284.509,353.651,252.725,327.395,241.173,291.988z"></path> <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M244.694,277.988l-50.225,16.397l-50.225,16.397l-50.013,16.327 c32.708,98.435,122.169,170.959,229.594,178.77l4.418-48.442l4.797-52.604l4.797-52.604 C294.1,348.289,257.864,318.354,244.694,277.988z"></path> <path d="M275.825,310.202c0.801,0.493,1.971,0.904,3.204,0.904c1.828,0,2.895-0.965,2.895-2.362c0-1.293-0.739-2.033-2.608-2.752 c-2.259-0.801-3.656-1.971-3.656-3.922c0-2.156,1.787-3.758,4.477-3.758c1.417,0,2.444,0.329,3.06,0.677l-0.493,1.458 c-0.451-0.247-1.375-0.657-2.629-0.657c-1.889,0-2.608,1.13-2.608,2.074c0,1.293,0.842,1.931,2.752,2.67 c2.342,0.904,3.532,2.033,3.532,4.067c0,2.135-1.581,3.984-4.847,3.984c-1.334,0-2.792-0.39-3.532-0.884L275.825,310.202z"></path> <path d="M293.347,312.009c-0.472,0.247-1.519,0.575-2.854,0.575c-2.998,0-4.95-2.033-4.95-5.072c0-3.06,2.095-5.278,5.34-5.278 c1.068,0,2.012,0.267,2.505,0.513l-0.411,1.396c-0.431-0.246-1.109-0.472-2.094-0.472c-2.28,0-3.512,1.685-3.512,3.758 c0,2.3,1.479,3.717,3.451,3.717c1.027,0,1.705-0.267,2.218-0.492L293.347,312.009z"></path> <path d="M296.351,307.738c0.041,2.444,1.602,3.45,3.409,3.45c1.293,0,2.074-0.226,2.752-0.513l0.309,1.294 c-0.637,0.288-1.725,0.616-3.307,0.616c-3.06,0-4.888-2.012-4.888-5.011c0-2.998,1.767-5.359,4.662-5.359 c3.245,0,4.108,2.854,4.108,4.682c0,0.37-0.042,0.657-0.062,0.842H296.351z M301.649,306.444c0.02-1.15-0.472-2.936-2.506-2.936 c-1.828,0-2.629,1.684-2.772,2.936H301.649z"></path> <path d="M305.638,305.129c0-1.027-0.02-1.869-0.082-2.69h1.602l0.102,1.643h0.042c0.492-0.945,1.643-1.869,3.286-1.869 c1.375,0,3.512,0.821,3.512,4.23v5.935h-1.808v-5.73c0-1.602-0.595-2.936-2.3-2.936c-1.191,0-2.115,0.842-2.423,1.848 c-0.082,0.226-0.123,0.534-0.123,0.842v5.976h-1.808V305.129z"></path> <path d="M322.546,312.379l-0.144-1.252h-0.062c-0.554,0.78-1.622,1.478-3.039,1.478c-2.012,0-3.039-1.417-3.039-2.854 c0-2.403,2.135-3.717,5.975-3.696v-0.206c0-0.821-0.226-2.3-2.259-2.3c-0.924,0-1.889,0.288-2.587,0.739l-0.411-1.191 c0.822-0.534,2.013-0.883,3.266-0.883c3.039,0,3.778,2.073,3.778,4.066v3.717c0,0.862,0.041,1.704,0.165,2.382H322.546z M322.28,307.307c-1.971-0.041-4.21,0.308-4.21,2.238c0,1.171,0.781,1.726,1.705,1.726c1.293,0,2.115-0.822,2.403-1.664 c0.061-0.185,0.103-0.39,0.103-0.575V307.307z"></path>');

jsfiddle : http://jsfiddle.net/a7dwcnkv/1/

Please let me know if I should provide aditional info, thank you.

Answer 1

Instead of using ng-bind-html="" i used ng-repeat for each path in the string and added ng-attr-d ng-attr-fill etc. for specific properties. This seems to render fine in all modern browsers.

<path ng-attr-fill="{{path.fill}}" ng-repeat="path in infoSala.plan" ng-attr-stroke="{{path.stroke}}" ng-attr-stroke-miterlimit="{{path.strokew}}" ng-attr-d="{{path.code}}"></path>

Hope this helps others.