Element not found or incorrect selector: path

[Eclektic]

Hi,

I try to test this library for svg manipulations. After library and plugin loaded ->

<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-svg.min.js"></script>

I have this error in my console "Element not found or incorrect selector: path", this error happen only when the svg plugin is loaded.

Thanks for the help.

[Eclektic]

ok I try to setup it on codepen ->
http://codepen.io/anon/pen/bZkPwv

The error is present but the simple morph exmple of the doc seem to work properly. In my case I can't make this demo work.

In this project I work with angular 2, from my component I'm able to access to KUTE but when I try to start an animation nothing happens.

this.tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }); this.tween.start();

this.tween return me an object who seems correct.

I'll try to setup a plunker with my settings.

[Eclektic]

Here's a plunker with the issue

https://plnkr.co/edit/S98TV49MJmlGKZlvKK7H?p=preview

[thednp]

Gimme a minute to investigate.

[thednp]

Try to move your tween var tween = KUTE.to('#rectangle', { path: '#star' }).start(); below the kute-svg.min.js script, it should be fine.

The natural order of scripting:

• the HTML
• KUTE.js core
• KUTE-PLUGIN_NAME
• your tween objects and controls.

The point of this is:

• we don't use document.ready to preserve performance
• we basically keep things simple, we don't load any JS in the head to speed up the page load

[Eclektic]

Thanks for the reply.

But as you can see in the plunker I work with Angular2 (who handle dependency injection). I need to manipulate svg (use of KUTE) from my component.
All KUTE js are loaded fine via tag script (index.html) then I can access KUTE object from my component (src/app.ts), if I print my tween at this time I got ->

e.Tween {_el: path#rectangle, _vSR: Object, _vS: Object, _vE: Object, _y: false…}

Everything seems ok but nothing happen in my view. So it's not a scripting order issue.

[thednp]

My experience with Angular is ZERO, but still I want to know more. Show me the code where you define the tween object. (In the plunket example)

[Eclektic]

https://plnkr.co/edit/S98TV49MJmlGKZlvKK7H?p=preview
In "src/app.ts" ->

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

declare var KUTE;

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="test()">MORPH</button>
      <svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
        <path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
        <path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
    </svg>
    </div>
  `,
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  test() {
    **var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();**
    console.log(tween);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

[Eclektic]

You can see in the template (In the "@component") my <svg>, and a button with the function test() binded to it on click event.

[thednp]

OK. The angular stuff tries to do it's work on document render as I understand, KUTE.js will animate anything that's already existing in the DOM, so try to wrap the click action in angular.element(document).ready().

http://stackoverflow.com/questions/18646756/how-to-run-function-in-angular-controller-on-document-ready

[Eclektic]

It's an angular 1.x way to do this in angular 2.x you have to use specific method (described here https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html, implements onInit or ngAfterContentInit or others).

I have updated the plunker this way. But still no animation.

[thednp]

The error is not there but animation does not occur because the _vS and _vE (valuesStart and valuesEnd objects) are not populated with any SVG path points. We need to investigate that.

[thednp]

Please try to change the angular scripting to make it work with this HTML

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.js"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.5.1/kute-svg.min.js"></script> 
  <script>
    var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' });
    test() {
      !tween.playing && tween.start();
      console.log(tween);
    }    
  </script>
</html>

[Eclektic]

If I try this way -> "Element not found or incorrect selector: #rectangle"

And it's normal in angular, I have to do all manipulation from the component class. When index.html is loaded (and the script with it) my view isn't rendered (no svg).

[thednp]

IMO you should get rid of this angular stuff, the template isn't there in the DOM when KUTE.js initializes, or the tween object is not properly built even if the element is in the DOM. I've spent 2 hours trying to edit your plunket with no result.

My final note before I close this: please try to order the code execution in a way that we have the HTML5 scripting done properly:

• HTML render
• HTML Angular template rendering
• Angular JS execution
• JS execution (KUTE.js)

Since I don't use and perhaps never will use Angular, it's up to you to look it up, and please let me know what you can find.

[Eclektic]

OK ! I didn't understand that, when KUTE (the core) initialize my svg needs to be already in the DOM (_sv and _se init at this time for each path in my DOM ?).

For testing purpose it's ok without angular but my current project use angular so I've to make it work with it.
So I need to use the dependency injection of Angular and make KUTE loaded with my view from my component.

I'll try this and let you know.
Thanks for your help

[thednp]

Yes, KUTE.js expects elements to be in the DOM so it can find it and build the tween object with proper _vS and _vE.

UPDATE: I've posted a SO question, maybe some more advanced users can help out.

[thednp]

Some user suggested you should use an empty SVG in your HTML so that my script can work.
Check this out.

[thednp]

I think I know why the script fails in the end, it's because the SVG Plugin is looking for a SVG element to check it's namespace and since there is none, please download latest version of the kute-svg.js and test in your app.