如何使用Angular.js将字符串从数据库转换为XML

debugcn 发表于 Dev

鼠

我有这个字符串的xml数据来自数据库。

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

我试图通过使用angular提供的ngBindHtml指令将其显示在我的视图中：（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>

当我这样做时，它会花掉使svg工作所需的一切，例如clip-path元素和属性。下面的例子：

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

我正在寻找一种将所有信息都放入DOM中以正确显示我的SVG的方法。我已经谷歌搜索，并搜索整个SO和我最近来的是上面的示例。

请指出正确的方向。

纳文

使用ngSanitize和$sce.trustAsHtml这样的组合

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

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

}]);

小提琴：https : //jsfiddle.net/codeandcloud/ew2y4pb0/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。