首页 文章

带角度6的SVG超链接问题

提问于
浏览 次
0

我通过Angular 6组件的 .html 文件使用 HTML img 标签显示 SVG 文件 . 我们称之为 SVG 文件 a.svg .

这个 a.svg 图像包含链接到其他 SVG 文件的部分，让我们只考虑它们中的第一个，名为 b.svg .

所有 SVG 文件都是静态的 . 它们位于Angular 6应用程序文件夹中 assets 的子文件夹中 .

当我直接在我的Internet浏览器下打开 a.svg 时，我可以单击超链接部分并导航到 b.svg ，没有任何问题 .

在Angular 6下，文件 a.svg 显示正确，但显然，我无法点击交互式部分 .

我在没有找到关于这种行为的根本原因的真实线索的情况下调查这个问题 . 也许，与安全问题有关 . 我想知道

  • 这是Angular 6的理想行为吗？

  • 有没有办法告诉Angular 6，允许用户在这些图像上进行交互？

html svg angular6

1 回答

  • 0

    终于找到了正确的方法 .

    首先，阅读security guide for angular，它提供了许多好的提示，尽管远非详尽无遗 .

    为了使我的代码顺利运行，这就是我改变的

    Firstly ，在角度组件 .html 文件中，我将 HTML img 标记更改为 div 标记，我在其上使用 [innerHTML] 绑定到名为svgFromFile的内部属性

    <div class='e2e-inner-html-bound' [innerHTML]='svgFromFile'></div>

    Then ，在angular component .ts 文件中，我将实现更改为使用 bypassSecurityTrustHtml() 对目标 SVG 文件的内容

    this.fn = '/assets/urba/diagram/' + params['fn'] + '.svg'; // from route parameter to image asset to be served

this.http.get(this.fn, {
  responseType: 'text'
}).subscribe(
  data => {
    console.log(data);
    this.svgFromFile = this.sanitizer.bypassSecurityTrustHtml(data);
  },
  error => console.log('svgFromFile', error)
);

    这样， SVG 文件中的嵌入式URL现在处于活动状态且可解除引用 .

    回复于

相关问题