我在我的应用上使用angularjs。我想在响应中用ng-repeat绘制svg。
例如
"<?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> "
其中graph.svg是像这样的svg字符串
console.log(JSON.stringify(obj));
但它不会绘制svg并只显示文本。 你能帮助我吗 ？ 谢谢。
答案 0 :(得分：1)
您必须使用ng-bind-html和ngSanitize。
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> ');
})
和
<div ng-bind-html="graph"></div>