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

Set xlink:href in svg with angularjs to base64-encoded image

本文关键字：设置 base64 编码图像 href angularjs svg 中的 xlink 使用更新时间：2023-09-26

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

问题:当我通过angularjs将正确的base64设置为图像xlink:href时，我不认为它是背景(在Safari 8.0.8中测试)。如果我将imagehref设置为内联base64或远程url，则所有工作正常。

演示

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

幸运的是，Angular已经为ng-href指令这样做了。

第二点是，Angular在很多特定于DOM的事情上都做得很糟糕，包括这个与svg相关的问题。xlink:href将由ng-href添加，但它只是不起作用。解决方法是在元素上设置一个空的xlink:href属性，这样Angular就不必创建它了。