Javascript 角度块svg xmlns作为$sce:unsecURL

我正在用Angular Material构建一个应用程序，其md图标结构如下：

<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>

但没有效果

我怎样才能让它工作

---

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

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

比如说：

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

对吗

如果是这样，那么您是否尝试过对SVG进行Base64编码

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

---

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

注意：尽管该字符串看起来像URL，但它不是真正的URL。它只是

xmlns

的一个常量值，表示“这是一个SVG”。将其更改为https会从技术上破坏它。@PaulLeBeau谢谢，很高兴知道。请注意，它也不能与http一起工作，并且会将其当作URL来阻止，因为某些原因不完全是这样，SVG本身与它在答案中的外观一样，唯一的区别是“fill”属性类似于fill=“{{（var1=='red'）？”#ff0000'：“#0000ff'}”，而不是纯颜色。在将CodePen插入我的主应用程序之前，我在CodePen上开发了这个页面，它工作得很好，所以SVG本身不会有问题。我必须创建一个函数来实现这一点，但将内容转换为base64（如您所说）解决了这个问题。非常感谢。

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