[Rotate SVG path around its center]

Dear Greensock Community,

 

my task is simple and clear: I want to rotate a svg group <g id="rotationFrame>. I have written the following TweenMax to achieve this:

TweenMax.to("#rotationFrame", .5, {    
    rotation:rotationDeg,
    transformOrigin:"50% 50%"
});

This does work quite good using safari. But as soon as I switch to Chrome the code does some crazy stuff:

 

Demo: https://vid.me/9EJU

 

How can I solve this?

 

To me it seems like Greensock is creating some wired css code, like

transform-origin: 0px 0px 0px;
transform: matrix(-0.86602, 0.49999, -0.49999, -0.86602, 957.167, 575.015);

As soon as I change this manually to something more straight forward, it does work in chrome:

transform-origin: 50% 50%
transform: rotate(90deg);

[Exclude svg code in external files while working with GASP]

When you said you need to animate them, do you mean to do anything more than what you would do with a DOM element? If you're not, there's no reason not to link them in just like images.

 

Even if you are going to do more than, translate, rotate, scale to some of them. You can have the these inlined and others as images.

 

 

Thanks Dipscom for the advice, there are quite a lot of good animations to perform with css only. Sadly I care about the more complex ones.

 

Thanks PointC for the hints, Ajax seems to be a good approach yet looking forward to a less complex SVG future.

[Exclude svg code in external files while working with GASP]

Dear community,

 

I got to code a one-page website. It got quite a lot of sections and SVG elements with a lot of elements. As I want to animate them, I thought I got to include them into my html document. Doing so creates a massive file with way to many lines to work productive inside the document.

 

Googling I found the `<use>` tag to reference groups or shapes, but it seems like its not suitable to reference a whole external .svg file. So thats my question:

 

- How do you handle HTML files with a lot of SVG code?

- Can I somehow use the external SVG files for internal use?

 

As a tweak, I know that SVG for Everybody https://github.com/jonathantneal/svg4everybody creates a polyfill by adding external SVG files into the DOM for IE9+. Can I somehow "always enable" this, even if I know that its not the most appropriate way?

 

To keep it simple: Its a "big thoughts low budget" project, so it does not need to a the professional solution at all and only has to support the newest browser (while IE9+ would be good).

 

Thanks in advance for any suggestions and let me know if you got any questions,

Marian.