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

Question

我正在制作类似项目特定的svg在线编辑器，并希望增加从计算机加载文件的功能，该文件将在base64中编码并设置为svg fill背景。

问题：当我通过angularjs将正确的base64设置为图像xlink：href时，我没有将其视为背景（在Safari 8.0.8中测试）。如果将image href设置为内联的base64或远程URL，则一切正常。

示范

Answer 1

这里的第一件事是ng-attrs-xlink:href不会绑定xlink:href，它将被标准化为xlink-href。

幸运的是，Angular已经为指令完成了这一工作ng-href。

第二个是Angular吸纳了DOM特有的许多功能，包括与SVG相关的功能。xlink:href将被添加，ng-href但将无法正常工作。解决方法是xlink:href在元素上具有空属性，因此Angular不必创建它。

这是一个小提琴。