Previously, I asked how to obtain the real coordinates (d
) of a path
when a transformation is applied, finally I decided to investigate the transformation formulas, I have already seen the translation, and now I am seeing the scaling (scale), I managed to do a scaling Basically the formula is:
x’ = x * sx
y’ = y * sy
If I have a path where d
attribute (command) of M5, 5 L50, 5 L50, 45 L5, 45 Z
, and, If we inspect the path in the DOM, we'll find that it has a width
of 135px
and a height
of 120px
:
<svg width="300" height="300" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="red" />
<path id="element" d="M5, 5 L50, 5 L50, 45 L5, 45 Z" fill="none" stroke="white" />
</svg>
So if I wanted to scale this path using a scale factor of 2
, it would be M10, 10 L100, 10 L100, 90 L10, 90
, but if we now inspect the path in the DOM, the width is 270px
and its height
is 240px
:
<svg width="300" height="300" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="red" />
<path id="element" d="M10, 10 L100, 10 L100, 90 L10, 90 Z" fill="none" stroke="white" />
</svg>
Therefore, the value or scale factor of 2
is equivalent to a width
of 135px
and a height
of 120px
, so:
How can I make this scale factor or value equal to 1px
?
Is there a conversion formula?
Playing around, I managed to guess that if the scale factor is:
1.1 = 15px
-> therefore, the width
would be 135px
increasing to 150px
and the height
would be 120px
increasing to 135px
.
1.01 = 1.5px
-> therefore, the width
would be 135px
increasing to 136.5px
and the height
would be 120px
increasing to 121.5px
.
I hope you have understood what I want to do, I hope you can help me.
CodePudding user response:
I think I get what you are saying, but your formulas don't seem to make sense.
1.1 = 15px -> therefore, the width would be 135px increasing to 150px and the height would be 120px increasing to 135px
That "15px" seems wrong. 1.1 * 135 = 148.5
, not 150
.
What I think you are asking is how to calculate the scale that would make the width become 150. Is that right?
The scale that will get the width to exactly 150 can be calculated like this:
new_width 150
scale = ----------- = ----- = 1.1111...
old_width 135
So checking that: 135 * 1.1111... = 150.0
.
And the new height using this scale would be: 120 * 1.1111... = 133.333...