Translate & Position

[00:00:00]
>> I want to take us through, A little explanation of SVG transform and in particular the translate command. So in SVG when we set translate on an element, what we're actually doing is we're actually setting the coordinate system of that particular element. So let's try kind of seeing what that looks like.

[00:00:32]
[COUGH] Let's play around with these sliders and see kind of try and get an intuitive feel of what that means. So we have these two rectangles. One of them has a transform on it and the other one does not. So this one does not have the transform and this one does have the transform.

[00:01:00]
And let's try, so, You can see that as I'm moving the x and y around, the whole coordinate system for this rectangle is moving around. And then alternatively, if we update the x and y position of this rectangle, then, You can see that even though the x y positions are exactly the same, these two squares are at completely different places in our SVG.

[00:01:45]
Even though it's the same SVG container, just applying this transform translate will change where both of these squares are. And the reason why I wanted to bring that up is because you might have noticed that in our example we used a translate on our paths and translate or transform and translate is very, very useful.

[00:02:12]
Because then what we can do is for our define attribute, our d attribute instead of having to write your pedal path to be let's say this is position 300 by 200 or something. So instead of having to write your pedal path as starting at 300 200 and then going down to 350 200 or something like that.

[00:02:41]
Instead of having to do all of that calculation, you can just pop in this translate and then it will be positioned exactly where you want it to. And you can keep that original kind of d attribute with the string that you've already created. So, and very, very helpful.

[00:02:58]
And we end up using the transform attribute a lot to be able to kind of manipulate these SVG elements and their underlying coordinate system. So make sure to kind of play around so that you have a good grasp on what's happening with this underneath the hood. And also, I'm just really proud of this little interaction.

[00:03:23]
And so, yeah. So if not for nothing else, please just play around with this so that I feel, [LAUGH] I don't know, I feel there was good effort put in for this interaction.