Jump to content
GreenSock

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)


}

 

Link to comment
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
Link to comment
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

Link to comment
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
Link to comment
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

Link to comment
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 

Link to comment
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

Link to comment
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

Link to comment
Share on other sites

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

 

Happy tweening!

Link to comment
Share on other sites

  • 4 months later...
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?

 

Link to comment
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!

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×