1

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

3 Answers 3

1

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>
   `
  })
4
  • Please show how you solved it.
    – Jeppe
    Jul 19, 2022 at 9:25
  • I said, I used attribute selector. I added project's source code you can check components under projects folder. Jul 19, 2022 at 11:07
  • You should post the code for it as part of your code, so the answer is still helpful if the links one day dies.
    – Jeppe
    Jul 19, 2022 at 12:35
  • @Jeppe I shared the code Jul 19, 2022 at 19:18
0

maybe it is due to the changedetection of angular. Have you perhaps tried https://angular.io/api/core/ChangeDetectorRef detectChanges after you change some other component?

 ngOnInit(): void {
     this.random();
     this.cd.detectChanges()
 }
1
  • Unfortunately, it didn't help. problem not detecting changes, problem is nothing rendering in screen except that circle. Jun 29, 2021 at 15:41
0

I had the same problem and it was cause due to a mismatch of angulars syntax to set html attributes. Beware of the defferent usage of

[style.height]="getHeight()"
...
getHeight(): string

and

[attr.height]="getHeight()"
...
getHeight(): string | number

Both work, but when you use [style.height], the method "getHeight()" has to return a string value including "px" oder "em" or whatever.

When using [attr.height] the method "getHeight()" can return a number which is interpreted as a "px" value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.