如何在 AngularJS 中渲染对象中包含的 SVG 代码答案

【问题标题】：How to render SVG code contained in object in AngularJS如何在 AngularJS 中渲染对象中包含的 SVG 代码
【发布时间】：2018-03-11 17:05:59
【问题描述】：

我目前无法通过我的指令的模板 HTML 生成此 svg 图像。我正在使用 AngularJS，但它是用 CoffeeScript 编写的。

  .directive 'FileOutput', () ->

    result =
      restrict: "A"
      replace: true
      transclude: true
      scope: {item: "="}
      template: '<div>' +
                  '<div ng-if = "item.type == \'seg\'">{{item.data}}' +
                  '</div>'

SVG 对象的开头如下所示：

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="3000px" height="3000px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="bg">
<rect x="0" y="0" width="3000px" height="3000px" style="fill:rgb(255,255,255);"/>

到目前为止，代码检查传入的 item 对象，并检查 item.type 是否等于“seg”。这部分工作正常。传入对象的第二部分是 item.data，其中包含所有 SVG 代码。到目前为止，我取得的最大成功是当前在网页上显示原始代码。

我不确定如何实际呈现包含在此原始代码中的图像。

非常感谢任何帮助！

【问题讨论】：

标签： html angularjs svg coffeescript

【解决方案1】：

你试过了吗？

  template: '<div>' +
              '<div ng-if = "item.type == \'seg\'">' + item.data +
              '</div>'

【讨论】：