Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
davvyy00

Can't tween/move groups inside an svg object

Recommended Posts

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Play animations</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/app.css">
  <script src="gsap/GSDevTools.js"></script><!-- Remove dev only -->
  <script src="gsap/TimelineMax.js"></script><!-- maybe use lite version -->
  <script src="gsap/TweenMax.js"></script><!-- maybe use lite version -->
  <script src="gsap/MorphSVGPlugin.js"></script><!-- maybe use lite version -->
  <script src="js/animate.js"></script>

</head>

<body>
  <div class="damage-wrapper">
    <object data="assets/sedan.svg" type="image/svg+xml" id="car-damage" width="100%" height="100%"></object>
  </div>
</body>

</html>

window.onload =  function() {

  var obj = document.querySelector(".damage-wrapper object")
    var wrapper = document.querySelector(".damage-wrapper")
  var svgDoc = obj.contentDocument
    debugger
    var carSvg = svgDoc.querySelector('svg')

    var part = svgDoc.querySelector('#right-back-door')
    var part2 = svgDoc.querySelector('#right-back-panel')

    var animateCarSvg = function(elementId, animation, duration, svg, svgDoc){
      var groups = elementId.match(/#(.)/);
      var effectId = groups[0]
      var tl = new TimelineMax({id: effectId})
        var carPart = svgDoc.querySelector(elementId)
        var clonePart = carPart.cloneNode(true)
        svg.insertBefore(clonePart, svg.firstChild);
        clonePart.addEventListener('click', function(){
            console.log(clonePart)
            tl.to(clonePart, duration,animation)
        })
        carPart.addEventListener('click', function(){
            console.log(carPart)
            tl.to(carPart, duration,animation)
        })
    }

    animateCarSvg('#right-back-panel', {x: 500}, 5, carSvg, svgDoc)


}

 

Share this post


Link to post
Share on other sites

I assume you're trying to reach inside of an external SVG file that's loaded onto the page, and animate individual elements that exist inside, right? For security reasons, browsers don't allow that. You need to inject the SVG into the DOM itself. 

  • Like 2

Share this post


Link to post
Share on other sites

Whats the security issue? The svg file is being delivered from the the same server as the application, I can animate this file if I don't layer the svg, but can't animate when I layer the svg into groups background etc

Share this post


Link to post
Share on other sites

An svg inside an image is a security issue, but an svg inside an object is OK. But what's the point if you have to go through all that trouble?

 

More conventional methods of accessing an SVG :

Inlining it

jQuery - http://plnkr.co/edit/khmnvLO3JfWRTkSuami4?p=preview

XHR - http://plnkr.co/edit/c1cHZKzolHdz6nNEcvtZ?p=preview

Fetch

 

See the Pen MXJwXR by osublake (@osublake) on CodePen

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Ok thanks for the info, I just like the syntax of the object tag it's much neater than throwing a blob of svg into the code

Share this post


Link to post
Share on other sites

I just looked at your code pen, I am trying to animate groups layered inside the svg, not the entire svg 

Share this post


Link to post
Share on other sites

I can't add click events, what I'm looking for is to click the eye then it animates

Not inline click events either

Share this post


Link to post
Share on other sites

yes this is what I wanted, thank you, the problem seemed to be that it didn't work if I exported the svg from illustrator as a artboard it did not work, when I exported as a asset the animation worked, I am using the object syntax too, so using an object works

Share this post


Link to post
Share on other sites

Great, so you're all set? Just making sure you don't need anything else. 

 

Happy tweening!

Share this post


Link to post
Share on other sites
On 6/8/2018 at 7:11 PM, GreenSock said:

I assume you're trying to reach inside of an external SVG file that's loaded onto the page, and animate individual elements that exist inside, right? For security reasons, browsers don't allow that. You need to inject the SVG into the DOM itself. 


I have hired someone to help me crank out some TweenMax animations. I'm using 1 SVG that has been grouped and exported per this thread. https://greensock.com/forums/topic/18010-better-adobe-illustrator-svg-exports-make-gsap-animating-easier/

Just like this post, I need to animate inside 1 SVG. My freelancer says that he needs to "inject the SVG into the DOM" like you mention. He's using SVG-Injector frrom 2014-2015, which worries me. Is this the only way to solve?

Also, It's not clear to me if the tiger codepen uses an injector or if that is an alternative to "injecting the SVG into the DOM". What I DO know is that the Illustrator Export workflow works very well and I'd like to keep that.

Here is the codepen without svg-injector and transition/mouseover layers (ie blue boxes) visible. https://codepen.io/yayaCreates/pen/yRXNxE/

Do I advise him to use svg-injector or do I offer up an alternative, knowing that we are exporting a layered Illustrator file?

 

Share this post


Link to post
Share on other sites

Note: I decided to copy/paste the SVG code directly into my index.html file instead of using img src or object. I'm not sure if that is best practice but it helps me start tweening while I await your advice.

Thanks for your time!

Share this post


Link to post
Share on other sites

Pasting the SVG code will work well. And if it's not a maintenance hassle, should give you better performance than an 'injector'.

  • Like 3

Share this post


Link to post
Share on other sites

If it's not going to change, I prefer to paste the SVG code into the HTML. Most code editors allow you to twirl it up and hide it while working so even if it's 100's of lines long, you don't have to stare at it as you scroll up and down your code.

 

If it's dynamic and the needed SVG will depend on some user interaction, then yes, you'll probably want to inject it. It sounds like yours won't be changing though so I say paste it and call it a day.

 

Just my two cents. YMMV.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×