SVG 比例尺（以原点为中心）

Question

我需要帮助将烟雾组原点移动到中心，以便它随火箭缩放。

我已经尝试过：

transform-origin: center; 翻译框：框填充；

解决这个问题，但似乎什么也没做。

link: https://codepen.io/paulsanti/pen/eYydYgN

Answer 1

你不小心拼错了 origin。应该是 transform-origin.

Answer 2

您可以使用特定的 3 轴 px 位置设置您的 transform-origin，它会起作用：


<g id="smoke" style="transform-origin: 761px 491px 0px">

并不是说这不是 761px 显示像素 - 在该 SVG 坐标系（viewBox）的上下文中，它实际上是 761 个 SVG 单位。显示像素的实际宽度将根据显示的比例而有所不同，但您不必担心。 . 您的 SVG 的 viewBox 为 0 0 1512 982，因此准确的中心是 x：1512/2，y：982/2。

（对于您的烟雾动画，您可能需要将原点向下移动 120 个单位左右，到 transform-origin: 761px 610px 0px 以使其与火箭的底部对齐）

SVG 比例尺（以原点为中心）

SVG scale (center the origan)

html

css

svg

css-animations

svg-animate