Positioning a SVG in the right place without using CSS

[nikolev]

Hey guys, it's the guy with the melting svg again. 😅

 

Here's my codepen for the day:  

 

I am trying to figure out how to position "#pink-piece-melted, #pink-piece" without the use of CSS Transform(transform: translate(53px,72px); )? Ideally I would have that handled inside their SVG properties.

 

Here's what they look like without applying any CSS:

 

I exported them separately from the cone's SVG in illustrator and thus they ended up being in a completely different location the page. Then I had to apply CSS but the CSS is an extra step I would like to avoid. If I export the cone and the melting SVGs together they will be lined up correctly. However I want to be able to export my project in pieces and work on them separately.

 

I was wondering if I can leverage the MotionPathHelper to move those around and somehow save the new values?

Thanks!

See the Pen LYpYvoM by nikolev (@nikolev) on CodePen

[OSUblake]

2 hours ago, nikolev said:

I was wondering if I can leverage the MotionPathHelper to move those around and somehow save the new values?

 

Sure. When you click on the path, you can drag it around. Once your path is in position, right-click on the element, select inspect, and look for the transform attribute. It will look something like this.

<path transform="matrix(1 0 0 1 17.5 -27.5)"></path>

 

You just need to add that transform attribute to your path element.

 

[PointC]

10 hours ago, nikolev said:

I exported them separately from the cone's SVG in illustrator and thus they ended up being in a completely different location the page.

If you use a background rectangle the same size as your SVG, you won't have these problems. Just make sure you choose the background rectangle along with any elements you want to export or copy/paste and you'll be good to go. I just wrote a little post about this:

Happy tweening.

 

[nikolev]

1 hour ago, PointC said:

If you use a background rectangle the same size as your SVG, you won't have these problems. Just make sure you choose the background rectangle along with any elements you want to export or copy/paste and you'll be good to go. I just wrote a little post about this:

Happy tweening.

 

@PointC That's a great advice! What would be the best way to make a background rectangle with the size of my SVG? Is there a trick to tel AI to make a rectangle to wrap pixel perfect around the SVG?

Also do you have other tips like this one? 

[ZachSaucier]

5 minutes ago, nikolev said:

@PointC That's a great advice! What would be the best way to make a background rectangle with the size of my SVG? Is there a trick to tel AI to make a rectangle to wrap pixel perfect around the SVG?

Select the rectangle tool and drag from the top left corner of your canvas to the bottom right. Turn on snapping to the artboard to make it easier to get it perfectly aligned. You might want to put it in its own layer like Craig did. Maybe that'd be good to include in your other post on the subject, @PointC?

 

5 minutes ago, nikolev said:

Also do you have other tips like this one? 

We have a long thread about SVG tips:

 

[nikolev]

2 minutes ago, ZachSaucier said:

Select the rectangle tool and drag from the top left corner of your canvas to the bottom right. Turn on snapping to the artboard to make it easier to get it perfectly aligned.

 

We have a long thread about SVG tips:

 

That's so awesome I feel like a kid in a candy shop. Gotta take some PTO next.

[PointC]

I always start each SVG project with a rectangle in a locked layer. You'll have a pretty decent idea how big (or at least what shape) you'd like your stage to be so start with that. You can always change it while you're working. 

 

6 minutes ago, nikolev said:

Also do you have other tips like this one? 

I've written a couple things. 

 

 

[Shrug ¯\_(ツ)_/¯]

Another good one by @PointC about using background rectangles can be seen here.

[Shrug ¯\_(ツ)_/¯]

@PointC a few of those older codepen demos found in your above links seem to need looked at (for posterity). 😉

[PointC]

7 minutes ago, Shrug ¯\_(ツ)_/¯ said:

a few of those older codepen demos found in your above links seem to need looked at

Yeah, good call. Some of my older stuff didn't set the width/height of the SVG and I just used auto in the CSS. Somewhere along the way Chrome stopped liking that. I've been updating as I've had time. I think I got all those in my articles now. Thanks.