3

我的目标是将代码从 Angular 1.3 转换为 Angular 2（在这两种情况下都使用 SVG）。

我尝试了以下简单的测试代码，它适用于不涉及插值的情况#1，但不适用于情况#2（使用插值），而 AFAICS 生成的 SVG 代码的唯一区别是包含一个额外的元素中的属性：class="ng-binding"

有没有办法抑制前面的类属性，还是有另一种解决方案？

顺便说一句，我无法完全正确地格式化（我很抱歉）。

HTML网页内容：

<html> 
  <head>
    <title>SVG and Angular2</title>
    <script src="quickstart/dist/es6-shim.js"></script>
  </head>

  <body> 
    <!-- The app component created in svg1.es6 --> 
    <my-svg></my-svg>

    <script>
      // Rewrite the paths to load the files
      System.paths = {
        'angular2/*':'/quickstart/angular2/*.js', // Angular
        'rtts_assert/*': '/quickstart/rtts_assert/*.js', // Runtime assertions
        'svg': 'svg1.es6' // The my-svg component
      };

      System.import('svg');
    </script>    
  </body>
</html>

JS文件内容：

import {Component, Template, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-svg'
})

    @Template({
    //case 1 works:
      inline: '<svg>&lt;ellipse cx="100" cy="100" rx="80" ry="50" fill="red"&gt;&lt;/ellipse&gt;</svg>'


//case 2 does not work:
//inline: "<svg>{{graphics}}</svg>"
})    

class MyAppComponent {
  constructor() {
    this.graphics = this.getGraphics(); 
  }   

  getGraphics() { 
     // return an array of SVG elements (eventually...)
     var ell1 = 
        '<ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse>';
     return ell1;
  } 
}

bootstrap(MyAppComponent);
4

2 回答 2

3

SVG 元素不使用与 HTML 元素相同的命名空间。将 SVG 元素插入 DOM 时，需要使用正确的 SVG 命名空间插入它们。

案例 1 有效，因为您将整个 SVG（包括<svg>标签）插入到 HTML 中。浏览器会自动使用正确的命名空间，因为它看到了<svg>标签并且知道该做什么。

情况 2 不起作用，因为您只是插入一个<ellipse>标签，而浏览器没有意识到它应该是使用 svg 命名空间创建的。

如果您使用浏览器的 DOM 检查器检查两个 SVG，并查看<ellipse>标签的namespace属性，您应该会看到差异。

于 2015-04-11T10:08:05.907 回答
2

您可以使用outerHtmlHTML 元素，例如：

@Component({
  selector: 'my-app',
  template: `
    <!--
      <svg xmlns='http://www.w3.org/2000/svg'><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>
    --> 

    <span [outerHTML]="graphics"></span>`
})
export class App {
  constructor() {
    this.graphics = this.getGraphics();
  }

  getGraphics() {
     // return an array of SVG elements (eventually...)
     var ell1 =
        '<svg><ellipse cx="100" cy="100" rx="80" ry="50" fill="red"></ellipse></svg>';
     return ell1;
  }
}

请注意，添加的字符串必须包含<svg>...</svg>

另请参阅如何使用 javascript 或 jquery 动态添加 SVG 图形？

于 2016-04-12T06:58:56.863 回答