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

Posted 2023-03-06

【中文标题】使用 angularjs 将 svg 中的 xlink:href 设置为 base64 编码的图像

【英文标题】：Set xlink:href in svg with angularjs to base64-encoded image

【发布时间】：2015-12-05 13:06:37

【问题描述】：

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

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

Demonstration

【参考方案1】：

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

幸运的是，Angular 已经为 does that 提供了 ng-href 指令。

第二个原因是 Angular 在许多特定于 DOM 的东西上很烂，包括 SVG-related one。 xlink:href 将由 ng-href 添加，但它不起作用。解决方法是在元素上设置空的 xlink:href 属性，这样 Angular 就不必创建它。

这里是a fiddle。

【讨论】：

解决方案有效。干杯：