使用angularjs将SVG中的xlink：href设置为base64编码的图像

Question

I'm making something like project-specific svg online editor, and want to add ability to load file from computer, which will be encoded in base64 and set as svg fill background.

Problem: when I set correct base64 as image xlink:href through angularjs I doesn't see it as background (tested in Safari 8.0.8). All works fine if I set image href as inlined base64 or remote url.

Demonstration

Answer 1

The first thing here is that ng-attrs-xlink:href won't bind to xlink:href , it will be normalized it to xlink-href .

Fortunately, Angular already does that for ng-href directive.

The second is that Angular sucks at many things specific to DOM, including this SVG-related one . xlink:href will be added by ng-href but it just won't work. The workaround is to have empty xlink:href attribute on the element, so Angular doesn't have to create it.

Here is a fiddle .