çizim svg in angluarJS

Question

Uygulamam üzerinde angularjs kullanıyorum. ve svg'yi yanıttan ng-yinelemek istiyorum. graph.svg svg dize bu

"<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000pt" height="600pt" viewBox="0 0 1000 600" version="1.1"> <g id="surface53"> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 702 114 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 418 402 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 418 402 L 702 114 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 702 114 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 290 288 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 641 322 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 641 322 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 754 183 L 641 322 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 282 141 C 282 144.867188 278.867188 148 275 148 C 271.132812 148 268 144.867188 268 141 C 268 137.132812 271.132812 134 275 134 C 278.867188 134 282 137.132812 282 141 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 709 114 C 709 117.867188 705.867188 121 702 121 C 698.132812 121 695 117.867188 695 114 C 695 110.132812 698.132812 107 702 107 C 705.867188 107 709 110.132812 709 114 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 425 402 C 425 405.867188 421.867188 409 418 409 C 414.132812 409 411 405.867188 411 402 C 411 398.132812 414.132812 395 418 395 C 421.867188 395 425 398.132812 425 402 "/> <path style="fill-rule:nonzero;fill:rgb(30.980392%,56.078431%,0%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(30.980392%,56.078431%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 297 288 C 297 291.867188 293.867188 295 290 295 C 286.132812 295 283 291.867188 283 288 C 283 284.132812 286.132812 281 290 281 C 293.867188 281 297 284.132812 297 288 "/> <path style="fill-rule:nonzero;fill:rgb(30.980392%,56.078431%,0%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(30.980392%,56.078431%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 180 307 C 180 310.867188 176.867188 314 173 314 C 169.132812 314 166 310.867188 166 307 C 166 303.132812 169.132812 300 173 300 C 176.867188 300 180 303.132812 180 307 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 648 322 C 648 325.867188 644.867188 329 641 329 C 637.132812 329 634 325.867188 634 322 C 634 318.132812 637.132812 315 641 315 C 644.867188 315 648 318.132812 648 322 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 761 183 C 761 186.867188 757.867188 190 754 190 C 750.132812 190 747 186.867188 747 183 C 747 179.132812 750.132812 176 754 176 C 757.867188 176 761 179.132812 761 183 "/> </g> </svg> " 

gibidir ama svg çizmek yok ve sadece metni gösterir örnek

<div ng-repeat="graph in myGraphs" class="graph transition-200"> 
    <div> {{ graph.svg }} </div> 
</div> 

için

. Bana yardım edebilir misin? Teşekkürler.

Answer 1

ng-bind-html ve ngSanitize kullanmanız gerekir.

var app = angular.module("app", ['ngSanitize']); 

app.controller('Ctrl', function($scope, $sce) { 
    $scope.graph = $sce.trustAsHtml('<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000pt" height="600pt" viewBox="0 0 1000 600" version="1.1"> <g id="surface53"> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 702 114 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 418 402 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 418 402 L 702 114 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 702 114 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 290 288 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,99.215686%,100%);stroke-opacity:1;stroke-miterlimit:10;" d="M 173 307 L 290 288 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 641 322 L 275 141 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 641 322 L 418 402 "/> <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(50.196078%,0%,25.098039%);stroke-opacity:1;stroke-miterlimit:10;" d="M 754 183 L 641 322 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 282 141 C 282 144.867188 278.867188 148 275 148 C 271.132812 148 268 144.867188 268 141 C 268 137.132812 271.132812 134 275 134 C 278.867188 134 282 137.132812 282 141 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 709 114 C 709 117.867188 705.867188 121 702 121 C 698.132812 121 695 117.867188 695 114 C 695 110.132812 698.132812 107 702 107 C 705.867188 107 709 110.132812 709 114 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 425 402 C 425 405.867188 421.867188 409 418 409 C 414.132812 409 411 405.867188 411 402 C 411 398.132812 414.132812 395 418 395 C 421.867188 395 425 398.132812 425 402 "/> <path style="fill-rule:nonzero;fill:rgb(30.980392%,56.078431%,0%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(30.980392%,56.078431%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 297 288 C 297 291.867188 293.867188 295 290 295 C 286.132812 295 283 291.867188 283 288 C 283 284.132812 286.132812 281 290 281 C 293.867188 281 297 284.132812 297 288 "/> <path style="fill-rule:nonzero;fill:rgb(30.980392%,56.078431%,0%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(30.980392%,56.078431%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 180 307 C 180 310.867188 176.867188 314 173 314 C 169.132812 314 166 310.867188 166 307 C 166 303.132812 169.132812 300 173 300 C 176.867188 300 180 303.132812 180 307 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 648 322 C 648 325.867188 644.867188 329 641 329 C 637.132812 329 634 325.867188 634 322 C 634 318.132812 637.132812 315 641 315 C 644.867188 315 648 318.132812 648 322 "/> <path style="fill-rule:nonzero;fill:rgb(0%,25.098039%,50.196078%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,25.098039%,50.196078%);stroke-opacity:1;stroke-miterlimit:10;" d="M 761 183 C 761 186.867188 757.867188 190 754 190 C 750.132812 190 747 186.867188 747 183 C 747 179.132812 750.132812 176 754 176 C 757.867188 176 761 179.132812 761 183 "/> </g> </svg> '); 
}) 

Ve:

<div ng-bind-html="graph"></div> 

Demo: https://plnkr.co/edit/DUw8HKK3iRYxBTwwoYTF?p=preview