Angular阻止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错误：

正如文档所示，我尝试将网址添加到SCE白名单中：

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

但它没有效果。

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

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

Answer 1

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

IE中。所以像：

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

这是对的吗？

如果是这种情况，那你试过Base64编码SVG吗？

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

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