Search code examples
angularsvgangular-components

Angular 12 doesn't render svg component

I am developing an angular component. it is an avatar creater using with svg. My problem is that when I run my component in angular project it draws just a circle not other components like nose,hair,face etc. ,but when I inspect my component and copy its svg elements and paste in a svg viewer, it shows as how should it be.

My Component in local enter image description here

As you can see, my component has svg elements but doesn't rendered in browser. But,when I use same svg elements in a viewer they are rendered.

My Component's svg elements in online svg viewer enter image description here

Also, here is project's repo

Angular project version

enter image description here

Any help is appreciated

Solution

  • Problem is that, when I create components with selector tags , angular adds its own element tags to svg schema and this breasks the svg's schema and browser doesn't render it. So, I used attribute selector for achieving this problem. This SO answer help me to solve this problem.

    Example project is here. You can check components under projects folder

    I used attribute tag which is wrapped with [and ] instead of selector tags.

    @Component({
  selector: '[ngx-beard]',
  template: `
    <svg:g>
    <ng-container *ngIf="beard == 'Hipster'">
      <path
        d="M270.126 194.455C279.615 234.059 255.201 273.857 215.597 283.345C192.29 288.93 168.916 282.772 151.692 268.687C134.5 252.801 130.5 201.301 126.692 176.95C140.692 208.451 176.316 210.895 210.192 204.951C238.692 199.951 261.491 198.951 261.491 159.951C263.376 162.567 268.469 187.538 270.126 194.455Z"
        [attr.fill]="beardColor"
      />
    </ng-container>
   </g>
   `
  })