在ionic/angular中使用svg提示以下错误

 

EXCEPTION: Template parse errors: Can't bind to 'xlink:href' since it isn't a known native property

html代码如下:

 

<svg role="img" class="icon">
    <use [xlink:href]="iconname"></use>
</svg>

 

出现错误的原因是是 svg没有property,所以需要绑定attribute

至于attribute和property的区别,大家可以课下去补习一下。

 

解决方案

<svg role="img" class="icon">
    <use [attr.xlink:href]="iconname"></use>
</svg>

或者

<svg role="img" class="icon">
    <use attr.xlink:href="{{iconname}}"></use>
</svg>