Wie bekomme ich eine Zeichenfolge von der DB in XML mit Angularjs

Ich habe diese Zeichenfolge von XML-Daten aus der Datenbank.Wie bekomme ich eine Zeichenfolge von der DB in XML mit Angularjs

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>';

Ich habe versucht, sie in meine Ansicht zu erhalten, indem die ngBindHtml Direktive, die Winkel wie so sieht vor: (ng-bind-html = "item.SVG").

<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>

Wenn ich das tue nimmt es alles heraus, was ich brauche die svg Arbeit wie die Clip-Pfad Elemente und Attribute zu machen. Beispiel unten:

<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>

Ich suche nach einer Möglichkeit, alle Daten in das DOM, um meine SVG korrekt anzuzeigen. Ich habe überall in SO google gesucht und gesucht und das nächste Beispiel ist das, was mir am nächsten kommt.

Bitte zeigen Sie mir in die richtige Richtung.

Quelle

2016-06-23 maus

eine Kombination aus ngSanitize Nutzung und $sce.trustAsHtml wie dieses

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

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

}]);

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

Quelle

2016-06-24 00:38:40 naveen

ich die Antwort zu schätzen wissen, aber wie ich Ihre Antwort ausprobiert Ich bin nach wie vor das gleiche Ergebnis zu erzielen. Der "Spezial" -Code aus dem SVG wird weggelassen und zeigt daher nicht korrekt an. – maus

Die Antwort ist korrekt, aber Sie müssen die ng-bind-html in ein div-Tag einfügen und sicherstellen, dass die gesamte SVG und nicht nur die innereHTML wie ich es ursprünglich getan habe. Ich habe eine Geige zum Vergleichen mit einbezogen. Fidel: https://jsfiddle.net/ew2y4pb0/3/ – maus

Wie bekomme ich eine Zeichenfolge von der DB in XML mit Angularjs

Antwort

Verwandte Themen