Angular 2 - how do I data bind an SVG attribute to a component property?

Question

I'm learning Angular 2. For that, I'm trynig to create basic example.

I have a class with a variable that contains this string: M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z

I'm trying to use that string as a parameter for a svg element

Just to check:

This svg works:

<svg fill="white" height="64" width="64">
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
</svg>

The variable icon in the template contains the correct string. I'm trying to do like this:

<svg fill="black" height="24" width="24">
  <path d={ icon } />
</svg>

And Adding " to the parameter d . But I cannot make it work

Answer 1

您需要使用SVG元素的属性绑定 ：

 <path [attr.d]="icon" />