让我们使用Angular来制作SVG吧！

12 月 ago

宇, 华

1 minute

这篇文章是2017年Angular Advent Calendar第21天的文章。

大家，你们有使用SVG吗～！

SVG可以像HTML一样表示文档结构，但在使用Angular时，有哪些有用性和注意事项呢？

与Angular的兼容性高

使用标签加载svg文件并使用它在功能上并没有什么特别之处，它只能提供类似于“在eventListner中获取onclick”的向量图像功能，并且可能没有与Angular的协同作用。

不过，SVG可以直接在HTML模板中进行编写，并且能够实时绘制出来。
因此，几乎所有代表Angular的功能，如绑定和指令等，都可以和HTML模板一样无缺地使用。

SVG提供了许多属性和滤镜等机制来装饰外观，这些无法通过HTML/CSS实现。通过将这些机制与Angular功能结合，可以轻松实现最强大的界面/体验。

此外，我们也完全支持组件的嵌套和CSS的封装。

与 Canvas 相比较

在中国，重要的差别还在于是否有模板。
在Canvas中，必须在js代码中完成所有的绘制，因此逻辑容易膨胀。
另外，如果了解HTML/CSS的话，很快就能够编写SVG，但学习Canvas可能需要一定的时间和成本。

请查阅微软开发者网络的以下页面，详细比较了Canvas和SVG，当你在技术选择方面有困惑时，请参考。

Microsoft | Developer Network – SVG と Canvas: どちらを選ぶか

也许读到这里，你可能会立刻想要在Angular中使用SVG，但实际上在Angular内直接使用SVG会遇到一些困难。

Angular会自动将被包围的元素识别为SVG元素，但是当将组件嵌套时，可能会错误地将其识别为未知元素，导致不正常工作。

因此，所以。

<svg>
  <g>
    <rect x="0" y="0" width="60" height="60"/>
  </g>
</svg>

可以为类似的代码添加svg:前缀。

<svg>
  <svg:g>
    <svg:rect x="0" y="0" width="60" height="60"/>
  </svg:g>
</svg>

似乎在Angular中未定义SVG元素的属性，因此无法直接绑定值。请按以下方式编写。

<svg>
  <svg:rect [attr.x]="x" attr.y="{{ y }}" attr.class="box {{ cls }}" width="60" height="60"/>
</svg>

可以直接使用在Angular中定义的ngClass等等。

由于SVG是XML格式，所以不允许在svg标签里包含未知的元素。因此，使用组件如会导致错误。

创建一个类似以下的选择器组件，并在使用时写成。

@Component({
  selector: '[myCmp]',
  templateUrl: './my-cmp.component.html'
})

一般情况下似乎使用g元素和svg元素。

SVGにはSMILというアニメーション実装があり、結構これが表現豊かなのですが、Chromeが廃止するとかしないとか言ったりしているので、利用しないほうがよいでしょう。

templateUrlに.svgのファイルを食わせたいのだけれどもangular-cliだけだとできないのだろうか？

HTML5でのSVGファイル操作のおさらい – Qiita

谢谢你。明天是puku0x先生。