SVG weirdness.

[hellachella]

Hi @thomasjbradley

So the SVG featuring the 2 people in front of a bag isn't doing what I think it should.

I wanted to apply the rotation to just the bag, but the people seem to be a package deal with it?

Also, Markbot says this:

Thanks! Chelle

[hellachella]

Also, it doesn't appear to be commiting to github properly?

[thomasjbradley]

The .bag class is used in two places: once on the whole SVG and a second time right on the bag path.

But, why are you using Javascript to do hover effect? That can completely be done with just CSS.

---

The Markbot thing is 100% my fault—there's a problem in the requirements for project.

[hellachella]

Thanks. I have another issue, @thomasjbradley

:)

So when I check my file progress live in the browser, my transform-origin is off somewhere. If you click on the hockey shirt, you'll see the the rotation anchor point is messed up. Same for the thumb and the x on the drug-boy.

http://hellachella.github.io/infographic-effects-interactivity/

[thomasjbradley]

Within SVGs, you can’t use the keywords for transform-origin, like center center—it has to be pixel measurements, like transform-origin: 25px 25px.

The pixels are measured within the confines of the SVG itself so, 0 0 would be the top left corner of the SVG.

[hellachella]

Thanks @thomasjbradley

Ok, so I did that. i made the hockeyleaf transform-origin: 21.55px -24.012;

It didn't change anything. When I view it from the file rather than live, it works, but when it goes live, there is no change and it rotates from the wrong anchor. :/

?

[thomasjbradley]

Have you synced and committed that change? I don't see it online.