Jump to content
Search Community

Image Origin questions... Help me understand this...

cr33ksid3 test
Moderator Tag

Recommended Posts

EXPLAIN TO ME WHY ...

Why does #box2Animate, a <rect>, animate just fine from {x:31,y:-31}) to x:0,y:0 (its original placement within the SVG design) ...
but #limeCircle <image> cannot go from {x:31,y:-31}) to x:0,y:0  the same way? The image is way off if you try that.

 

Where is #limeCircle getting its origins?

 

AND, #turqCircle isn't an embedded <image>, it is linked... I added this one by cut
and paste directly to the original SVG code. Visually, why was it placed in the lower right of the design and not within the 300x600 container?

 

All objects of an SVG should have a default top left origin, right?

 

This makes no sense to me... Any tutorials or docs out there?

See the Pen yLgEVqQ by cr33ksid3 (@cr33ksid3) on CodePen

Link to comment
Share on other sites

I'm not sure I follow what you're doing here, but your lime circle png has a funky transform on it,

transform="matrix(0.9999 0 0 0.9999 49.6729 204.3335)"

I don't know if that's what you want or not. The turquoise circle png is just a regular img tag. You need to change that.

<!--  switch this -->
<img overflow="visible" width="200" height="200" id="turqCircle" src="https://assets.codepen.io/3769770/turqCircle.png"></image> 
<!--  to this -->
<image xlink:href="https://assets.codepen.io/3769770/turqCircle.png" id="turqCircle" width="200" height="200" />

Happy tweening.

:)

 

PS Just my two cents but I'd lose all the data:image/png;base64 stuff and use a regular image or better yet, actual SVG elements.

 

  • Like 3
Link to comment
Share on other sites

@PointC Let me just say that my SVG come straight from Adobe Illustrator CS6... I set their defaults to SVG 1.1 and have been using embed instead of link for images. The embed setting puts the "xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS..." in the code for the image tag as well as that funky "matrix()" parameter. Should I be concerned about using Illustrator too now?

 

I have tried animating a non-inline SVG, SVG included in an <img> tag,  in the past without success to a degree. I cannot animate its individual elements unless it is inline. Sure, you can animate the whole SVG as non-inline...

 

I will change the #turqCircle to xlink:href rather than src and see if that makes the difference in containing that circle within the 300x600 container. Not sure where it will place it yet though.

 

What I attempted to show in the Pen was the fact that a <rect> object could be off set with .set() and animate back to its original placement. However, if you tried offset the inline SVG img and animate that back to its original position you had to specify funky x/y coordinates. I want to know why I guess and what is the easiest way to get the offset results.

 

Thanks again for the extra help...

Link to comment
Share on other sites

@PointC That funky "matrix()" parameter is how Illustrator provides the coordinates for the final design or object placement. Getting rid of that would place the element in the top left corner.

 

Top left corner is where the #turqCircle ended up after making your switch too.

 

AND... #box2Animate (pink box) doesn't use "matrix()" parameters for initial placement but does use specific X/Y values. Must be the difference in object types I guess.

Link to comment
Share on other sites

34 minutes ago, cr33ksid3 said:

Should I be concerned about using Illustrator too now?

No - AI is fine for exports. Have you been using a background rectangle in your designs?

https://www.motiontricks.com/use-background-rectangle-with-svg-exports/

 

I wouldn't export images from AI. I just add those manually after export. It's easier for me, but YMMV.

 

36 minutes ago, cr33ksid3 said:

Not sure where it will place it yet though.

Should be at 0,0 unless you specify otherwise.

 

36 minutes ago, cr33ksid3 said:

you had to specify funky x/y coordinates.

Yes - because you already had a transform on that element.

 

Keep in mind that x/y attributes are different than x/y transforms. Say you have a rectangle at 0,0 and you run this tween.

gsap.to("#target", { x: 100 })

If you inspect the element you'll find.

transform="matrix(1,0,0,1,100,0)"

But running this tween.

gsap.to("#target", { attr: { x: 100 } });

will animate the x attribute to a value of 100. There would be no transform matrix. They both end at the same position, but they are different. In fact, if you run both of the above tweens on that rectangle, they would both influence the position and it would appear to be at 200,0. But if you tried to animate to x:0, it would not go back to the top left corner as you may expect.

 

Does that make sense?

:)

 

 

  • Like 2
Link to comment
Share on other sites

@PointC Holy crap "Keep in mind that x/y attributes are different than x/y transforms" no I didn't. This will take some time to absorb. You guys all know this stuff. I feel like I just keep finding missing pieces...

 

Yes #bg is the background rectangle. All my designs have a background that I can control. Why? To provide a boundary?

 

I am now aware of the matrix() code and will just have to adjust from there.

transform="matrix(0.9999 0 0 0.9999 49.6729 204.3335)"

The transform above at least gives me a rough idea where my animated image should end up... x:50, y:204 before I remove it.  Right?

Link to comment
Share on other sites

6 minutes ago, cr33ksid3 said:

Why? To provide a boundary?

Yep. You'll usually want everything contained in the SVG so setting up a background rectangle gives you a nice viewBox size that won't add funky transforms to paths and other elements when you export. I show the differences in the tutorial above.

 

7 minutes ago, cr33ksid3 said:

The transform above at least gives me a rough idea where my animated image should end up... x:50, y:204 before I remove it.  Right?

That should be about right. 

 

Happy tweening.

:)

  • 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.
×
×
  • Create New...