angular - Can't bind to ':xlink:href' since it isn't a known property of ':svg:image'

Question

I am trying to set dynamicly href for svg image like this :

<svg style="width:100%; height:100%">
    <image x="-29" y="7" height="53" width="170" xlink:href="{{logoFile}}"  />
</svg>

but then I got error in console : Can't bind to ':xlink:href' since it isn't a known property of ':svg:image

Answer 1

Since xlink:href is an attribute but not a property of the SVG image element, use attribute binding:

[attr.xlink:href]="logoFile"

See this stackblitz for a demo.