如何使用比例公式将比例从 SVG 单位转换为像素？

Question

之前，I asked如何在应用变换时获取path的真实坐标（d），最后我决定研究变换公式，我已经看到了翻译，现在我看到了缩放（scale），我设法做了一个缩放基本上公式是：

x’ = x * sx

y’ = y * sy

如果我有 M5, 5 L50, 5 L50, 45 L5, 45 Z 的 d 属性（命令）的路径，并且，如果我们检查 DOM 中的路径，我们会发现它有一个135px 的 width 和 120px 的 height：

<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>

因此，如果我想使用 2 的 比例因子 来缩放此路径，它将是 M10, 10 L100, 10 L100, 90 L10, 90，但如果我们现在检查路径在DOM中，宽度是270px，它的height是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>

因此，2 的值或比例因子相当于 135px 的 width 和 120px 的 height，因此：

如何使这个比例因子或值等于 1px？

有转换公式吗？

玩玩，我猜到如果比例因子是：

1.1 = 15px -> 因此，width 将 135px 增加到 150px 而 height 将 120px 增加到135px.

1.01 = 1.5px -> 因此，width 将 135px 增加到 136.5px 而 height 将 120px 增加到121.5px.

希望你已经明白我想做什么，希望你能帮助我。

Answer 1

我认为我明白你的意思，但你的公式似乎没有意义。

1.1 = 15px -> therefore, the width would be 135px increasing to 150px and the height would be 120px increasing to 135px

那个“15px”好像不对。 1.1 * 135 = 148.5，不是 150。

我想你问的是如何计算使宽度变为150的比例，对吗？

将宽度精确到 150 的比例可以这样计算：

         new_width     150
scale = ----------- = ----- = 1.1111...
         old_width     135

所以检查：135 * 1.1111... = 150.0.

使用此比例的新高度为：120 * 1.1111... = 133.333...

如何使用比例公式将比例从 SVG 单位转换为像素？

How to convert scaling from SVG units to pixels using scale formula?

javascript

svg

formula

pixel

scaletransform