Animated SVG in Component

Ionic Framework ionic-v3
1

Hello,
Is there any possibility to check when svg object has been loaded after completed loading component?
Now I’m using setTimeout to delay getting an item from svg object for future animation. But that way is not effective - sometimes is loaded and sometimes even after 1s delay it’s still not loaded.
I want to find better solution.

2

Hello,
your header is really different to your question.

Maybe a lifecycle can help you. see here
https://angular.io/guide/lifecycle-hooks

Maybe it depends on how you load your svg.

Best regards, anna-liebt

3

I didn’t have an idea how my header should be written :P.
I saw many times that site with lifecycle and now I’m trying to get an item from svg object in ngAfterViewInit() function. Getting whole svg runs properly. The problem is shadow DOM. If I want to get the item from that svg it takes some time. So after calling ngAfterViewInit() function there is no shadow DOM created and cannot get the item from it :frowning:.

It could be a cause how I loaded that svg.

So I have something like that (in ngAfterViewInit())

    let svgObj = document.getElementById("icon") as HTMLObjectElement;
    let svgDoc = svgObj.contentDocument;
    let lock = svgDoc.getElementById("lock");
4

Hello,
how you have embebbed our svg in htmL?

If it is as tag like , then it is maybe grabable with @ViewChild.

@ViewChild and @ViewChildren is the angular way to grab elements from your html for you. Take a look here http://www.thetechieshouse.com/use-angular-4-viewchild-5-minutes/

In your .html you have something like

<svg  #usefulname> 
<circle cx='1.6em' cy='1.6em'  r="1.5em" style="stroke:darkblue;"/>
  </svg>

In your .ts file you can grab it like that.

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

export class Whatever{

  @ViewChild('usefulname') bla: ElementRef;
 
  ngAfterViewInit() {
   this.bla.whatever();
  }
}

So Viewchild grabs an element named ‘usefulname’ that is an ElementRef and make it as bla avialable. Bla is in ngFterViewInit or later available.

Depening to how you grab and what you grab syntax is different for example

@ViewChild(mycustom) bla: mycustomcomponent;

grabs first tag mycustom that is a mycustomcomponent

So if anybody else can explain it better or found a fault, then please correct me, because I am a bloody beginner too.

Best regards, anna-liebt

5

No, I do not embedded svg in html. I would like to have a seperate file like now I have.
So, unfortunately, I cannot use your idea ;/.

6

Hello,
is this a local file?

Best regards, anna-liebt

7

Yep, I did by myself and put into assets folder.

8

Hello,
in relation to your header. Is there something that prevents you to put the svg in a component?

Best regards, anna-liebt

9

Not svg itself. I’m talking about getting an element of that svg which later will be animated.

10

Hello,
if you have access to your svg, and you are using one svg and not any many whatever svgs from somewhere.

So it is maybe a possiblity to put the whole svg in a component and grab any elements inside this svg with viewchild like

<svg  #usefulname> 
<circle #animateme cx='1.6em' cy='1.6em'  r="1.5em" style="stroke:darkblue;"/>
  </svg>
11

hello,

if only animation is your goal, then maybe something like animejs is your friend.

Best regards, anna-liebt

12

As I told you before - I would like to not do it. It makes html “dirty”. That way will be done when there is no other possibilites to achieve my “goal” :wink: