Question

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

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

有没有办法来抑制前面的类属性，还是有其他解决方案？

顺便说一句，我无法将格式化得恰到好处（道歉）。

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

Answer 1

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

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

案例2不起作用，因为您只是插入<ellipse>标记，并且浏览器没有意识到它应该是使用svg名称空间创建的。

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

SVG + Angular2代码示例不适用于插值

1 个答案: