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 错误：

正如文档所建议的那样，我尝试将 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方法来解决这个问题。但这可能是一个可行的解决方法。

Angular 阻止 svg xmlns 作为 $sce:insecurl

Angular blocks svg xmlns as $sce:insecurl

javascript

svg

angularjs

angularjs-material