Angular：动态渲染时 SVG 路径标签不可见

大佬教程收集整理的这篇文章主要介绍了Angular：动态渲染时 SVG 路径标签不可见，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决Angular：动态渲染时 SVG 路径标签不可见？

我有一个从服务器获取的 SVG 文件，然后我必须将其渲染到我拥有的视图中。

问题是我不能使用 @H_944_5@<img> 或 @H_944_5@[INNERHTML]，因为我需要添加用户交互和事件并将其集成到 Angular 的生命周期中。

所以我编写了以下代码来解析 XML 并将其呈现为组件模板中的具体元素：

svg-map-test.component.ts：

@H_944_5@import { AfterVIEw@R_618_10943@ked,AfterVIEwInit,ChangeDetectorRef,Component,Inject,OnInit } from '@angular/core';
import { document } from '@angular/common';

const svg = `
<!-- Generator: Adobe Illustrator 24.0.2,SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
vIEwBox="0 0 1180.5 841.9" style="enable-BACkground:new 0 0 1180.5 841.9;" xml:space="preserve">
<style type="text/CSS">
\t.st0{fill:#F89464;}
\t.st1{fill:#B6B773;}
\t.st2{fill:#4CFEFc;}
\t.st3{fill:#606060;}
\t.st4{fill:#FFFFFF;}
</style>
<g ID="s:gold">
\t<g ID="r:a">
\t\t<g ID="c:a2">
\t\t\t<path class="st0" d="M911.9,62.3H896c-2.1,0-3.8-1.7-3.8-3.8V42.6c0-2.1,1.7-3.8,3.8-3.8h15.9c2.1,3.8,1.7,3.8v15.9
\t\t\t\tC915.7,60.6,914,62.3,911.9,62.3z"/>
\t\t</g>
\t</g>
</g>
</svg>
`


@Component({
  SELEctor: 'app-svg-map-test',templateUrl: './svg-map-test.component.HTML',styleUrls: ['./svg-map-test.component.sCSS']
})
export class SvgMapTESTComponent implements OnInit,AfterVIEw@R_618_10943@ked {

  xmlDom: document;

  constructor(@Inject(document) private document: document,private cdRef: ChangeDetectorRef) {
  }

  ngOnInit(): voID {
    const parser = new DOMParser();
    this.xmlDom = parser.parseFromString(svg,'image/svg+xml');
  }

  fakeArray(collection: HTMLCollection) {
    const res = [];
    for (let i = 0; i < collection.length; i++) {
      res.push(collection.item(i));
    }
    return res;
  }

}

svg-map-test.component.HTML：

@H_944_5@<ng-container *ngIf="xmlDom" [ngTemplateOutlet]="element" [ngTemplateOutletContext]="{ $implicit: xmlDom.documentElement }"></ng-container>

<ng-template #element let-parent>
  <ng-container [ngSwitch]="parent.nodename">
    <ng-container *ngSwitchCase="'svg'" [ngTemplateOutlet]="svgElement" [ngTemplateOutletContext]="{ $implicit: parent }">
    </ng-container>
    <ng-container *ngSwitchCase="'style'" [ngTemplateOutlet]="styleElement" [ngTemplateOutletContext]="{ $implicit: parent }">
    </ng-container>
    <ng-container *ngSwitchCase="'g'" [ngTemplateOutlet]="gElement" [ngTemplateOutletContext]="{ $implicit: parent }">
    </ng-container>
    <ng-container *ngSwitchCase="'rect'" [ngTemplateOutlet]="rectElement" [ngTemplateOutletContext]="{ $implicit: parent }">
    </ng-container>
    <ng-container *ngSwitchCase="'path'" [ngTemplateOutlet]="patHelement" [ngTemplateOutletContext]="{ $implicit: parent }">
    </ng-container>
  </ng-container>
</ng-template>

<ng-template #nested let-children>
  <ng-container *ngFor="let item of fakeArray(children)">
    <ng-container [ngTemplateOutlet]="element" [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
  </ng-container>
</ng-template>

<ng-template #svgElement let-svg>
  <svg [attr.version]="svg.getAttribute('version')"
       [attr.xmlns]="svg.getAttribute('xmlns')"
       [attr.xmlns:xlink]="svg.getAttribute('xmlns:xlink')"
       [attr.x]="svg.getAttribute('x')"
       [attr.y]="svg.getAttribute('y')"
       [attr.vIEwBox]="svg.getAttribute('vIEwBox')"
       [attr.xml:space]="svg.getAttribute('xml:space')">
    <ng-container [ngTemplateOutlet]="nested" [ngTemplateOutletContext]="{ $implicit: svg.children }"></ng-container>
  </svg>
</ng-template>

<ng-template #styleElement let-style>
  <style type="text/CSS">
    .st0{fill:#F89464;}
    .st1{fill:#B6B773;}
    .st2{fill:#4CFEFc;}
    .st3{fill:#606060;}
    .st4{fill:#FFFFFF;}
  </style>
</ng-template>

<ng-template #gElement let-g>
  <g [attr.ID]="g.getAttribute('ID')">
    <ng-container [ngTemplateOutlet]="nested" [ngTemplateOutletContext]="{ $implicit: g.children }"></ng-container>
  </g>
</ng-template>

<ng-template #rectElement let-rect>
  <rect [attr.x]="rect.getAttribute('x')"
        [attr.y]="rect.getAttribute('y')"
        [class]="rect.classname"
        [attr.wIDth]="rect.getAttribute('wIDth')"
        [attr.height]="rect.getAttribute('height')"></rect>
</ng-template>

<ng-template #patHelement let-path>
  <path [attr.d]="path.getAttribute('d')">
  </path>
</ng-template>

但是，没有显示任何内容。 现在，当我在浏览器中检查 DOM 时，一切都在那里并正确呈现，但我注意到 @H_944_5@d 属性没有反映在元素样式中，如下例所示：

我尝试在 @H_944_5@detectChanges 中使用 @H_944_5@ngAfterVIEwInit，但是没有用。 当我弄乱检查器并在 SVG 中手动添加一个随机 @H_944_5@<g> 时，所有内容突然变得可见，并且 @H_944_5@d 属性正确反映在相应元素的样式中。

注意：如果您认为有更好的方法来实现我想要做的事情，请告诉我。

解决方法

@H_944_5@<ng-template #rectElement let-rect>
  <svg>
    <rect [attr.x]="rect.getAttribute('x')"
          [attr.y]="rect.getAttribute('y')"
          [class]="rect.className"
          [attr.width]="rect.getAttribute('width')"
          [attr.height]="rect.getAttribute('height')"></rect>
  </svg>
</ng-template>

大佬总结

以上是大佬教程为你收集整理的Angular：动态渲染时 SVG 路径标签不可见全部内容，希望文章能够帮你解决Angular：动态渲染时 SVG 路径标签不可见所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。