Skip to main content
Participant
December 5, 2017
Answered

How to place my svg into a div

  • December 5, 2017
  • 1 reply
  • 765 views

Hi,

i made my first svg with animate cc and im trying to make it work on my website now. Unfortunately it is always appent to "body". How to place it into a div of my choice?

Hope some have some hints for me!

Edit: Forget to say that i installed the snap.svg plugin.

- Tobias

This topic has been closed for replies.

1 reply

kglad
Community Expert
Community Expert
December 5, 2017

i don't know how you're using snap.svg but you there are a number of ways to add svg to a web page:

image - How to use .svg files in a webpage? - Stack Overflow

Participant
December 6, 2017

Let me be clearer. This is the code that is generated by snap.svg to load the svg and append to body. How to place the svg into a <div>?

<script type="text/javascript">

var jsonfile = "<?=get_bloginfo('stylesheet_directory')?>/js/SnapSVGAnimator/swb-ani.json",

    fps = 24,

    width = 200,

    height = 200,

    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>