Угловой мат-значок не отображает SVG с масками - PullRequest
Новая
       21

Угловой мат-значок не отображает SVG с масками

1 голос
/ 16 марта 2019

У меня есть серия .svgs, экспортированная из Sketch (см. Пример ниже), которую я зарегистрировал в MatIconRegistry, и я показываю ее с использованием компонента mat-icon.

Однако язаметил, что любые значки, использующие маски в Sketch (экспортированные как <defs>), не отображаются должным образом, а иногда и вовсе показывают неправильный значок.

Я знаю, что это проблема с mat-icon, поскольку файлы отображаютсянормально в браузере.Также mat-icon хорошо отрисовывается, когда исходный файл не использует маски (однако мы не можем гарантировать, что у svgs не будет маски)

Кто-нибудь знает способ исправить это, либов эскизе или в угловом?

icon-registry.service.ts

import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@Injectable({
  providedIn: 'root',
})
export class MyIconRegistry {
  constructor(
    private matIconRegistry: MatIconRegistry, 
    private domSanitizer: DomSanitizer) {
      this.matIconRegistry.addSvgIcon(
        'dot',
        'path/to/icon-dot.svg'
      )
  }
}

myComponent.component.ts

...
@Component({
  selector: 'my-component',
  template: `<mat-icon svgIcon="dot"></mat-icon>`,
  styleUrls: ['./icon.scss'],
  encapsulation: ViewEncapsulation.Emulated,
})
...

myModule.module.ts 

...
@NgModule({
  declarations: [MyComponent],
  providers: [MyIconRegistry],
  imports: [CommonModule, MatIconModule, HttpClientModule],
  exports: [MyComponent],
})

icon-dot.svg

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
    <title>icon-dot</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="12" cy="12" r="8"></circle>
    </defs>
    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icon-dot">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <g id="Mask" fill-rule="nonzero"></g>
            <g id="Blue/" mask="url(#mask-2)" fill="#0A4ACE">
                <rect id="Rectangle" x="0" y="0" width="24" height="24"></rect>
            </g>
        </g>
    </g>
</svg>

1 Ответ

0 голосов
/ 18 марта 2019

Для любого, кто столкнется с этим в будущем:

Технически проблема не была с mat-icon, как я подозревал.Ошибка при рендеринге svg произошла из-за неуникальной маски Sketch и пути id.

. Поэтому для решения этой проблемы я использовал инкапсуляцию ShadowDom, которая делает каждый svg уникальным в своем собственном DOMи написал мою собственную инъекцию.

myComponent.component.ts 

...
@Component({
  ...
  encapsulation: ViewEncapsulation.ShadowDom,
})
...

  ngOnChanges(changes: SimpleChanges){
    this.iconRegistry.getNamedSvgIcon(this.name).pipe(take(1)).subscribe(
      svg => {
        this.setSvgElement(svg)
      },
        (err: Error) => console.warn(`Error retrieving icon: ${err.message}`)
    )
  }

  private setSvgElement(svg: SVGElement){
    this.elementRef.nativeElement.shadowRoot.appendChild(svg)
  }
...