Angular2 xlink:href Issues

Question

I have got a *ngFor and inside that I'm writing some SVG with <use> tags to link to a specific part of the svg:

<svg viewbox="0 0 8 8"><use [attr.xlink:href]="'sprite.svg#' + item.icon"></use></svg>

this doesn't seem to work, as it won't load the SVG into the file.

However, if i use the following it works (without ng, just to show, that it's not a wrong path):

<svg viewbox="0 0 8 8"><use xlink:href="sprite.svg#file"></use></svg>

Answer 1

As even with ng2 beta 6 the bug seems to presist, I found, that adding an empty regular html-tag xlink:href="" works around the the issues and the specified id of the svg loads correctly.

Now instead of this:

<svg viewbox="0 0 8 8"><use [attr.xlink:href]="'sprite.svg#' + item.icon"></use></svg>

The code has been changed to this (just added an empty xlink:href=""):

<svg viewbox="0 0 8 8"><use [attr.xlink:href]="'sprite.svg#' + item.icon" xlink:href=""></use></svg>

Answer 2

I am not fully understand,but if you use href ,check this ,may it help you.

 <a href="{{url}}" target="_blank" ></a>