javascript - Angular block svg xmlns 作为 $sce :insecurl

Question

我正在 Angular Material 中构建一个应用程序，其 md-icon 结构如下:

<md-icon class="ic1" md-svg-src='data:image/svg+xml,
  <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <ellipse ry="16" rx="16" id="svg_1" cy="16" cx="16" stroke-width="1.5" fill="#ff0000"/>                                    
  </svg>' class="s32">
</md-icon>

但它无法加载，因为 Angular 会阻止对 https://www.w3.org/2000/svg 的调用(我已经尝试过 HTTP 和 HTTPS)并抛出 $sce :insecurl 错误:

正如文档所建议的，我尝试将 URL 添加到 SCE 白名单:

app.config(function ($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.w3.org/2000/svg', 'https://*.w3.org/**'])
})

但是没有效果。

我怎样才能让它发挥作用？

请注意，我已经简化了 HTML 以仅显示相关内容，实际上，我根据变量动态更改填充颜色，因此如果我能让这个动态版本正常工作，我宁愿不将每个 SVG 保存为文件。

Answer 1

我假设您在运行时生成该 SVG 字符串，而不是像上面那样对其进行硬编码？否则您将无法更改填充颜色。

即。所以类似:

 md-svg-src='{{generateIcon()}} ...

正确吗？

如果是这样，那么您是否尝试过使用 Base64 编码 SVG？

generateIcon() {
  svgStr = "whatever";
  return "data:image/svg+xml;base64," + base64(svgStr);
}

也许有更好的 Angular 方法来解决这个问题。但这可能是一个可能的解决方法。