DBからAngularjsを使用してXMLに文字列を取得する方法

Question

データベースから来るxmlデータの文字列があります。 （NG-バインドのhtml =「item.SVG」）：

var svgString = ' 
<defs> 
    <clipPath id="path-print-area-path"> 
    <path d="M767.5,474.5h-575a50,50,0,0,1-50-50V99.5a50,50,0,0,1,50-50h575a50,50,0,0,1,50,50v325A50,50,0,0,1,767.5,474.5Z" fill="transparent"></path> 
    </clipPath> 
    <clipPath id="path-top-FrontEdge"> 
    <path d="M817.5 512 142.5 512 142.5 500 480 500 817.5 500 817.5 512Z" fill="#FF0000"></path> 
    </clipPath> 
</defs> 
<g id="Content" clip-path="url(http://maus.com/builder/2/14#path-print-area-path)" style="display: block;"> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/link-to-image.png" x="164" y="40" width="258" height="213" class="" style="cursor: move;"></image> 
    <g id="Content-Text"> 
    <text font-family="calibri" font-size="45pt" fill="#FF0000" x="480" y="252" style="cursor: move;"> 
     <tspan style="basline-shift: 45;">Maus</tspan> 
    </text> 
    <text font-family="calibri" font-size="18pt" fill="#FF0000" x="480" y="277" style="cursor: move;"> 
     <tspan style="basline-shift: 18;">Master Chief</tspan> 
    </text> 
    </g> 
</g>'; 

私は、角がそうのように提供してngBindHtmlディレクティブを使用して、私のビューにそれを得ることを試みました。

<svg ng-bind-html="item.SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 560"> 
</svg> 

これを実行すると、クリップパスの要素と属性のようにsvgの作業を行うために必要なすべてが必要になります。以下の例です：

<svg ng-bind-html="x.Item.SVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 960 560"> 
    <defs> 
    <!-- this is suppose to have <clip-path id="path-print-area-path"> --> 
     <path d="M767.5,474.5h-575a50,50,0,0,1-50-50V99.5a50,50,0,0,1,50-50h575a50,50,0,0,1,50,50v325A50,50,0,0,1,767.5,474.5Z" fill="transparent"> 
     </path> 
    <!-- </clip-path> --> 
    <!-- this is suppose to have <clip-path id="path-top-FrontEdge"> --> 
     <path d="M817.5 512 142.5 512 142.5 500 480 500 817.5 500 817.5 512Z" fill="#FF0000"> 
     </path> 
    <!-- </clip-path> --> 
    </defs> 
    <g id="Content"> <!-- this is suppose to have these attributes; clip-path="url(http://maus.com/builder/2/14#path-print-area-path)" style="display: block;" --> 
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/mm/Axomo/4179/users/FREDRICKJO/5_140732_4-dragon%20logo.png" x="164" y="40" width="258" height="213" class=""></image> 
    <g id="Content-Text"> 
     <text font-family="calibri" font-size="45pt" fill="#FF0000" x="480" y="252"> 
     <tspan>Maus</tspan> 
     </text> 
     <text font-family="calibri" font-size="18pt" fill="#FF0000" x="480" y="277"> 
     <tspan>Master Chief</tspan> 
     </text> 
    </g> 
    </g> 
</svg> 

私はSVGを正しく表示するためにすべての情報をDOMに取得する方法を探しています。私はgoogleを検索し、それをすべて検索し、私が来たのは上記の例です。

正しい方向を指してください。フィドル

Answer 1

ngSanitizeの組み合わせを使用して$sce.trustAsHtml

このような

app.controller("SVGController", ["$scope", "$sce", function($scope, $sce) { 

    $scope.item = { 
     TrustedSVG: $sce.trustAsHtml(svgString) 
    }; 

}]); 

：https://jsfiddle.net/codeandcloud/ew2y4pb0/