2 返信 最新の回答 日時: Jun 23, 2016 8:19 PM ユーザー:maruyaman888

    【Animate CC】SVG書き出し(snap.SVG)後のHTMLでの表示位置について

    maruyaman888

      Animate CCにてSVGアニメーションを制作しました。

      そのデータを別HTMLに反映させたいのですが、書き出したhtmlファイルにはscriptのみで、表示位置を設定することができません。

      具体的には</body>直前に入ってしまいます。

       

      書き出し後のデータは…

       

      ■htmlデータ

      ■jsonファイル

      ■SnapSVGAnimator

       ├ SnapSVGAnimator.min.js

       └ snap.svg-min.js

       

      パブリッシュ時に圧縮しない状態だと・・・

       

      ■htmlデータ

      ■jsonファイル

      ■SnapSVGAnimator

      ├ SnapSVGAnimator.js

      ├ SnapSVGAnimator.min.js

      ├ package.json

      ├ Gruntfile.js

      ├ vendor

      │ └ snap.svg

      │  ├ snap.svg.js

      │  └ snap.svg-min.js

      └  app
        ├ banner.js
        ├ bitmap.js
        ├ commands.js
        ├ component.js
        ├ footer.js
        ├ garbagePool.js
        ├ movieclip.js
        ├ resourceManager.js
        ├ shape.js

        └  text.js

       

      です。

       

      おそらくJS側で何らかの処理が行われていると思うのですが、どこをどうすればよいかわからず困惑しております。。。

       

      詳しい方、ご教授いただければ幸いです。

       

      以下、取り急ぎHTMLデータを記述します。

       

       

      --------

       

       

      ★HTMLデータ

       

      <body>

      <script src="./SnapSVGAnimator/js/vendor/snap.svg/snap.svg-min.js"></script>

      <script src="./SnapSVGAnimator/js/SnapSVGAnimator.min.js"></script>

       

      <script type="text/javascript">

              var jsonfile = "ServiceAnimation01.json",

                  fps = 24,

                  width = 600,

                  height = 600,

                  AJAX_req;

       

          AJAX_JSON_Req(jsonfile);

       

          function handle_AJAX_Complete() {

              if( AJAX_req.readyState == 4 && AJAX_req.status == 200 )

              {

                  json = JSON.parse(AJAX_req.responseText);

                  comp = new SVGAnim(

                                 json,

                                 width,

                                 height,

                                 fps

                                 );

              }

          }

       

          function AJAX_JSON_Req( url )

          {

              AJAX_req = new XMLHttpRequest();

              AJAX_req.open("GET", url, true);

              AJAX_req.setRequestHeader("Content-type", "application/json");

       

              AJAX_req.onreadystatechange = handle_AJAX_Complete;

              AJAX_req.send();

          }

       

      </script>

      </body>

       

      --------

       

       

      恐れ入りますが、ご返答の程お待ちしております。