Question

我有多个SVG图标，它们使用相同的html模板插入一个字符串（包含一个SVG标记）。除了IE11之外，它在所有浏览器中都能正常工作（我相信IE11以下的任何东西都会遇到同样的问题）。

以下是模板的外观：

<svg data-component [attr.viewBox]="vbox" preserveAspectRatio="none">
   <svg:g #svgContainer></g>
</svg>
<span *ngIf="label">{{ label | translate }}</span>

这是基础图标类，随后会被其他所有图标组件扩展：

import { Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

export class IconBase implements AfterViewInit {

  @Input('icon-label') public label: string;
  @Input('icon-vbox') public vbox: string = '0 0 30 30';

  @ViewChild('svgContainer') public svgContainer: ElementRef;

  public svgString: any = '';

  ngAfterViewInit(): void {
    this.svgContainer.nativeElement.innerHTML = this.svgString;
  }
}

到目前为止一切顺利。现在这里有一个图标组件，与其他每个图标组件一样，只设置svgString。其他所有内容都在基本图标类中处理：

import { Component } from '@angular/core';
import { IconBase } from './icon';

@Component({
    moduleId: module.id,
    selector: 'icon-view-list, [icon-view-list]',
    templateUrl: './icon.html'
})

export class IconViewListComponent extends IconBase {
    public svgString: string = `
        <path class="st0" d="M5.1,10H10V5.1H5.1V10z M12.5,5.1V10h12.4V5.1H12.5z M12.5,17.5h12.4v-4.9H12.5V17.5z M12.5,24.9h12.4V20H12.5
        V24.9z M5.1,17.5H10v-4.9H5.1V17.5z M5.1,24.9H10V20H5.1V24.9z"/>
    `;
}

该字符串可以是path，line，polyline，circle - 基本上是任何SVG元素。

Chrome和Firefox会将字符串插入<svg>元素，但IE不执行任何操作 - 它只会呈现空<svg>。我尝试通过命名空间svg元素来遵循建议，其中插入应该发生，但不，这没有帮助。有什么建议？也许一些代码完全重构？

感谢。

Angular2 + SVG：为多个组件使用一个模板（IE修复？）

0 个答案: